armybrazerzkidai.blogg.se - Sketchpad for drawing

SKETCHPAD FOR DRAWING UPDATE
SKETCHPAD FOR DRAWING FULL
SKETCHPAD FOR DRAWING CODE
SKETCHPAD FOR DRAWING WINDOWS 8

sketchpad_mouseDown – registers a mouse click and also draws a pixel at the current position.

So now we have our 3 event handlers each performing a function – Get the current mouse position relative to the top-left of the canvas Draw a pixel if the mouse button is currently being pressed

SKETCHPAD FOR DRAWING UPDATE

Update the mouse co-ordinates when moved Define some variables to keep track of the mouse status We’ll also use our own getMousePos function to get the current co-ordinates of the mouse pointer when it’s moved. Let’s call them sketchpad_mouseDown, sketchpad_mouseUp and sketchpad_mouseMove. So we should have one function for each event. What each handler will do is simply call a function of our choice immediately after the event is triggered. Nothing happens – We will need to add event handlers to tell the browser to do something when that specific event is triggered. So, we will need to keep track of the mouse button status by using the mouseup and mousedown triggers.Īdditionally, we can use mousemove to do something useful when the mouse is being moved.

mousemove event – Activated each time that the mouse is being moved, regardless of the button state.

mouseup event – Activated once whenever the (left) mouse button is released.

mousedown event – Activated once whenever the (left) mouse button is pressed.

In fact, we have 3 useful triggers or “events” to help us keep track of the mouse: We have to keep track of when the button is pressed and released ourselves, in order to determine whether it’s currently being held down. There is a slight complication here, since we can’t directly check if the mouse button is being held down using Javascript.

Immediately after moving the mouse with the button held down.Immediately after the mouse button is pressed.There are two cases (assuming the mouse is positioned over the sketchpad): When do we want to draw a dot on the sketchpad? Now we can draw on the canvas at a location of our choice, using the drawDot function. Parameters are: A canvas context, the x position, the y position Draws a dot at a specific position on the supplied canvas name If the browser supports the canvas tag, get the 2d drawing context for this canvas Var canvas = document.getElementById('sketchpad') Get the specific canvas element from the HTML document

SKETCHPAD FOR DRAWING CODE

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.

SKETCHPAD FOR DRAWING WINDOWS 8

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.

SKETCHPAD FOR DRAWING FULL

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.