Var canvas = document.getElementById('sketchpad') Get the specific canvas element from the HTML document We need to write some small Javascript code to do this. Let’s try to do the drawing function first.
A way to call this function when the mouse button is being held down, and give it the current position of the mouse. A function to draw a dot (filled circle) at the specified location on the canvas. Since our drawing action will take place when the mouse button is pressed down, we can put all of our code into a function that’s called when this happens. When the cursor/pointer is over the sketchpad, and a mouse button pressed, then we want to draw something at that location. We can do this using the mouse first, then add touchscreen support later. Now let’s try to make it into a working sketchpad. We can use the HTML 5 canvas tag to create our sketchpad area.Įdit the HTML for your page, add the canvas tag with an id name of your choice, and change the dimensions to fit your layout. Let’s start with a web-page with some text, and an area beside it for sketching. Blank paperįirst, we need something to draw on. See the “Supported browsers” note towards the end of the article for more information. 
Unfortunately, this won’t work directly on Windows 8 touchscreen when using Internet Explorer, however, it can be adapted relatively easily using the alternative “Pointer Events” model.
If you are thinking of making a full HTML 5 touchscreen site or app, you might want to check out something like jQuery Mobile, however it’s worth going through the pure Javascript version here to get an understanding of the interactions between the HTML 5 canvas, and the mouse and touchscreen functions.Ĭompatibility note: We going to use the most common “Touch Events” approach here which is supported by all browsers on iOS and Android.
0 kommentar(er)
