Android HTML5 ios javascript Touchscreen Web Design

A Simple Touchscreen Sketchpad using Javascript and HTML5

From an unique image by Sean MacEntee

With the discharge of Home windows eight, and the large reputation of iPads and Android tablets, touchscreen is being built into extra and more traditional PCs.

Nevertheless, seeing dedicated touchscreen options on web sites continues to be comparatively rare.

Here we’ll show you easy methods to use some primary HTML and Javascript to add a simple touch-enabled sketchpad to a web page.

We’re not making an attempt to construct a full-featured touchscreen app right here – just a easy, very light-weight sketchpad, however it must be sufficient to point out you a few of the primary concepts behind contact help on the internet.

In case you are considering of creating a full HTML 5 touchscreen website or app, you may need to take a look at one thing like jQuery Cellular, nevertheless it’s value going by means of the pure Javascript version right here to get an understanding of the interactions between the HTML 5 canvas, and the mouse and touchscreen features.

Compatibility notice: We going to use the most typical “Touch Events” strategy here which is supported by all browsers on iOS and Android. Unfortunately, this gained’t work instantly on Windows 8 touchscreen when using Web Explorer, nevertheless, it may be adapted relatively simply using the choice “Pointer Events” mannequin.

See the “Supported browsers” notice in the direction of the top of the article for extra info.

Clean paper

First, we’d like something to draw on. Let’s start with a web-page with some text, and an area beside it for sketching. We will use the HTML 5 canvas tag to create our sketchpad space.

Edit the HTML in your page, add the canvas tag with an id identify of your selection, and change the size to suit your format.

This creates our blank canvas. Now let’s try to make it into a working sketchpad. We will do that using the mouse first, then add touchscreen help later.

So what happens in a sketchpad?

When the cursor/pointer is over the sketchpad, and a mouse button pressed, then we need to draw something at that location.

Since our drawing motion will happen when the mouse button is pressed down, we will put all of our code right into a perform that’s referred to as when this happens.

We’d like two things:

  • A perform to attract a dot (crammed circle) at the specified location on the canvas
  • A solution to call this perform when the mouse button is being held down, and give it the current position of the mouse

Let’s try to do the drawing perform first.

We have to write some small Javascript code to do that.

Now we will draw on the canvas at a location of our selection, using the drawDot perform.

When to Draw

When can we need to draw a dot on the sketchpad?

There are two instances (assuming the mouse is positioned over the sketchpad):

  • Immediately after the mouse button is pressed
  • Immediately after shifting the mouse with the button held down

There is a slight complication here, since we will’t instantly examine if the mouse button is being held down using Javascript.

We’ve got to maintain monitor of when the button is pressed and launched ourselves, with a purpose to decide whether it’s presently being held down.

Tracking the mouse

track-mouse

Picture credit score: Sonja Trpovski

In truth, we have now 3 helpful triggers or “events” to assist us hold monitor of the mouse:

  • mousedown occasion – Activated once each time the (left) mouse button is pressed.
  • mouseup event – Activated as soon as each time the (left) mouse button is launched.
  • mousemove occasion – Activated each time that the mouse is being moved, whatever the button state.

So, we might want to maintain monitor of the mouse button status by using the mouseup and mousedown triggers.

Additionally, we will use mousemove to do something useful when the mouse is being moved.

What happens with these events normally?

Nothing happens – We will need to add occasion handlers to inform the browser to do one thing when that specific event is triggered.

Event handlers

What each handler will do is just call a perform of our selection instantly after the occasion is triggered. So we should always have one perform for each event.

Let’s call them sketchpad_mouseDown, sketchpad_mouseUp and sketchpad_mouseMove.

We’ll also use our personal getMousePos perform to get the present co-ordinates of the mouse pointer when it’s moved.

So now we now have our three event handlers every performing a perform –

  • sketchpad_mouseDown – registers a mouse click on and also draws a pixel at the current position.
  • sketchpad_mouseUp – simply de-registers the mouse click on, so we know that the button is not being pressed.
  • sketchpad_mouseMove – checks to see if the mouse button is at present down, and in that case, attracts something at the present location.
  • getMousePos – updates our mouseX and mouseY variables with the present position of the mouse.

All we’ve got to do now’s attach our occasion handlers to the events themselves.

canvas.addEventListener(‘mousedown’, sketchpad_mouseDown, false);
canvas.addEventListener(‘mousemove’, sketchpad_mouseMove, false);
window.addEventListener(‘mouseup’, sketchpad_mouseUp, false);

You may notice that we are using addEventListener with the canvas component within the first two instances, and then with “window” for the mouseup event.

It’s because for mouse downs and mouse strikes, we’re solely when these happen over our sketchpad canvas.

Nevertheless, someone might click the mouse button on the canvas, then maintain it held down, but transfer the mouse to another part of the online page. In the event that they then launch the mouse button, we gained’t see this event occurring if we’re simply wanting on the canvas, and our mouse button monitoring can turn out to be confused, and not register the button being released.

To be able to avoid this, we’ll pay attention in the whole window for mouse up occasions, so that we will monitor them appropriately even if they occur outdoors of our sketchpad field.

Notice: You can too use “document.body” as an alternative of window, nevertheless since our instance is being displayed in this publish within an iframe, using “window” ought to capture the mouseup event outdoors of the iframe, whereas using “document.body” gained’t.

Putting it all together

Here’s what our mouse-based sketchpad seems like right now (attempt it!):

(Look further down this article for the complete touchscreen version)

… and right here’s the entire web-page code for the mouse-based model:

sketchpad-mouse.html (text file)



Sketchpad

Simple mouse-based HTML5 canvas sketchpad.

Draw something by holding down the mouse button or using single clicks.

On a touchscreen, tapping the world will register as a single mouse click.



Notice that we’ve got moved the initialisation of the canvas context and event handlers into a separate “init()” perform that is known as just after the web page has completed loading (using “”).

We’ve also added a very simple “Clear” button which calls a perform with a single line of code to clear the canvas.

Forestall close by text being by accident selected

You may discover that we’ve used this block of styling in the CSS of the div surrounding the sketchpad:

-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;

This is because of the fact that when you have got a big area on the display that includes dragging the mouse across, the mouse cursor can typically stray outdoors of this area.

When this happens, as a result of the mouse button is being held down, it’s interpreted by the online browser as a request to pick areas of textual content. This produces a distracting flash of highlighting on the page.

To stop this occurring, we will simply use the above user-select statements in the related CSS space to stop textual content surrounding the sketchpad from being “selectable”.

Including Touchscreen help

plasma-ball

Image Credit score: Melanie Davies

In case you just need to mess around with a touchscreen interface, it’d appear to be a variety of effort including all the mouse help above.

Nevertheless, the touchscreen code is similar to the mouse-based sketchpad code, so it’s helpful to know how the mouse model works before taking a look at touchscreen. Additionally, typically you’ll need to have a functioning mouse model working as a fallback.

Touch events

In case you attempt the present mouse-based version on an iPad, it’s not very appealing. Shifting your finger over the sketchpad scrolls it, and you possibly can nearly make a blot seem in case you press on a single area.

It’s because we’re not yet listening to the precise events which are being triggered when the canvas space is touched.

We are getting some limited interplay with a single faucet on the sketchpad – it’s because the tap can also be being interpreted as a mouseclick, and so it’ll (ultimately) hearth the mousedown occasion handler.

Nevertheless, there’s a 300ms delay when using the mouse occasions like this on a touchscreen gadget.

It’s because the system is waiting to see if the single-tap is actually a double-tap. Once we add our contact occasion handlers, we gained’t want to fret about this quirk, because the touch occasions are triggered immediately after touching the display.

Identical to the mouse version, we’ve entry to at the least 3 helpful touch-based occasions:

  • touchstart occasion – Activated each time a contact is registered on the associated area.
  • touchend occasion – Activated each time a touch is launched from the related space.
  • touchmove event – Activated each time a touch motion is detected within the associated space.

Let’s take a look at the code for dealing with these events.

We’re going to maintain this code separate from the mouse-handling code, which results in some bloat, however provides a bit more flexibility in instances the place that you must carry out a selected action solely in response to a contact event.

Additionally, the code is somewhat easier, since we don’t have to maintain monitor of something just like the mouse button status – when a touchmove occasion is fired, we will already assume the equivalent of “the mouse button is being pressed” is occurring.

We also don’t actually need to do something with the touchend occasion on this case, nevertheless you may need so as to add it in a extra complicated software to perform an event when a finger is lifted off the display – for example to replace some values. On this case, just copy the format of the touchstart event handler.

Word additionally that we’re simply going to cope with non-multitouch help for the moment.

In case you are working with a posh multitouch website or potential HTML app, you may need to look into something like hammer.js.

Listed here are the features that we’re going to trigger on contact events.

Forestall display scrolling on touch-enabled parts

A essential part of adding touch help to a page is understanding which parts ought to be resistant to scrolling the page by swiping up or down.

There are some ergonomic issues right here – you don’t need to confuse the consumer by having giant swathes of the display un-scrollable. The secret’s to have intuitive, fairly sized areas that perform some motion based mostly on contact, that don’t additionally scroll the web page.

To stop scrolling on individual web page parts, we need to call the Javascript preventDefault() perform at the end of our touchmove handler. You’ll be able to see this in the sketchpad_touchMove perform above.

Keep in mind that we still have to attach our touch handlers above to the right parts on the web page.

We will do that as follows:

canvas.addEventListener(‘touchstart’, sketchpad_touchStart, false);
canvas.addEventListener(‘touchmove’, sketchpad_touchMove, false);

Notice that we’re only attaching the occasion listeners to the canvas component.

When you determine to attach these listeners to a bigger a part of the web page, or even all the document, you’d in all probability have to be careful in managing use of preventDefault() to cease swipe-scrolling – for example, you may only set off it for sure contact co-ordinates or boundaries.

Also, regardless that we’re only capturing touchmove in relation to our canvas factor, it is going to continue firing even for those who drag outdoors of the canvas space, so remember that the touch co-ordinates you get at this stage could be outdoors the bounds of the canvas.

Word that we’re using probably the most basic type of retrieving the present “touch list” by using e.touches in getTouchPos().

You possibly can additionally use one thing like e.targetTouches or e.changedTouches, which may give a barely totally different record. This is more necessary for multi-touch purposes although, compared to single-touch help.

Complete model

Now we’ve full touchscreen and mouse help:

… and here’s the entire code for the final model:

sketchpad-touch.html (textual content file)



Sketchpad

Touchscreen and mouse help HTML5 canvas sketchpad.

Draw one thing by tapping or dragging.

Works on iOS, Android and desktop/laptop computer touchscreens using Chrome/Firefox/Safari.



Touchscreen browsers attempt to emulate mouse events

It’s value clarifying a further point at this stage – to be able to attempt to get most compatibility with present web sites and their mouse occasion handling, browsers on touchscreen units comparable to Cellular Safari will attempt their greatest to emulate a mouse whenever you faucet on any page aspect that’s aware of mouse events, resembling a hyperlink, or a div or canvas listening for mousedown, mouseup and so forth.

So until we forestall this behaviour, we’d get a double-acknowledgement when tapping on the sketchpad for instance – the primary event set off can be a touchstart, followed shortly after by a mousedown.

To stop this occurring, we simply use the preventDefault() name once we’re completed with our touchstart, with a purpose to stop any further occasions from being triggered as a consequence of that specific contact motion.

You may run into some bugs with this on older Android browsers, nevertheless, especially should you’re additionally using extra complicated interactions with touchend, so it might be value absolutely testing this behaviour on a touchscreen system.

Also, solely use preventDefault() in this context once you’re positive that you’ve accomplished regardless of the motion the consumer needed.

In case you listened for touchstart on the whole doc page for example, and issued a preventDefault() no matter the place/what the consumer touched, chances are you’ll discover that they’re not capable of tap on links on the web page, since you’ve stopped the additional issuing of the “emulated” mousedown or mouseclick on the hyperlink.

So simply use preventDefault() once you’re positive that you simply’ve coated all of the potential consumer interaction inside the contact events related to that component.

Supported browsers/units

The HTML 5 canvas aspect works in all trendy browsers, including cellular/pill. With Web Explorer, it’s supported from version 9 upwards. The touch events (touchstart, touchmove..) work on all cellular/tablet browsers. The state of affairs with desktop browsers is a bit more involved.

IE has an alternate system referred to as Pointer Events that’s supported from IE 10 upwards. The problem here is that different browsers have yet so as to add help, however it’s anticipated to happen throughout 2014 and onward.

Firefox supports contact events, but resulting from a bug filed in bugzilla, they’ve been turned off by default prior to now few releases. They are often re-enabled in the browser. Additional particulars are here.

It’s still value using the Contact events version now nevertheless, since it helps all current and legacy Android and iPad users for example, in addition to Chromebook and different touchscreen customers on desktops/laptops.

As more non-mobile customers turn into touchscreen enabled, strain will undoubtedly grow on browser builders to get every part working smoothly on the desktop too.

2018 update – Although most desktops browsers now help Pointer Occasions, cellular and especially iOS help just isn’t there – see present browser help for more particulars.

Upgrades

When you’ve obtained to grips with the essential framework for the sketchpad, it’s straightforward so as to add options!


Change the pen measurement

Substitute each occasion of “12” in referred to as to the DrawDot() perform with a variable of your personal.

You possibly can then add photographs or buttons to the page which change the value of this variable when clicked.


Change the colors or add a background

Following the same technique as changing the pen measurement, merely modify DrawDot() to use your personal RGBA (pink,inexperienced,blue,alpha/opacity) values.

Change these values based mostly on some interplay with an on-screen widget (or use a counter to offer a cool rainbow impact?).

So as to add a background picture to the canvas, simply add a “background-image:” line to the CSS code for the canvas (our instance canvas is known as #sketchpad)

Replace:
Here’s an example of a Sketchpad with a background image and a counter for altering the hue of the pen. As an alternative of using the RGB color scheme when drawing the dot, we’re now using HSL which makes it a lot simpler to vary the hue.

Take a look at the HSL Calculator here for a visual representation of what the totally different H,S and L values imply.

source code is here

…and here’s a hyperlink to the background image …have fun!


Draw related strains as an alternative of dots

You may need observed that in the event you transfer the mouse or contact position too quick, the rendering can’t sustain and you get some spaces between dots.

An alternate is to create a DrawLine perform, just like DrawDot, besides that it keeps monitor of the final x,y position as well as the current one.

Now as an alternative of using ctx.arc to attract a circle, use ctx.moveTo to place the start of the road at the previous co-ordinates, then ctx.lineTo to draw the road to the new (current) co-ordinates (example right here).

This modifications the look and feel of the sketchpad, so it might or will not be an improvement on the “dot” technique.

Update: Here is a working instance of the sketchpad using strains (supply code is right here).

Word that we’ve added lastX and lastY variables, and set them to -1 initially. These will probably be our beginning positions once we draw a line, but since we don’t know where the primary line will begin from, we’ll use the -1 value to point that the present position is invalid, or unknown. There isn’t any special significance to using -1, it could possibly be some other co-ordinate worth that gained’t appear in regular use.

Initially of our new DrawLine perform, we examine if lastX is invalid (set to -1).

This would be the case the primary time a line is drawn, or if the “pen” (mouse or finger) just isn’t touching the canvas. In that case, we’ll simply set lastX and lastY to the current place, then the subsequent time we name drawLine, we will appropriately draw a line with two valid sets of co-ordinates.

This introduces a slight bit of added complexity, since we have to invalidate the lastX and lastY co-ordinates any time the pen is lifted from the canvas. In any other case, we might continue drawing a line from the final position, even when someone has lifted the “pen” and determined to draw in a unique a part of the canvas.

The solution is just to set lastX and lastY to -1 within the mouseUp perform, and also in a new touchEnd perform:

perform sketchpad_mouseUp()
mouseDown=zero;

// Reset lastX and lastY to -1 to point that they are now invalid, since we’ve got lifted the “pen”
lastX=-1;
lastY=-1;

perform sketchpad_touchEnd()
// Reset lastX and lastY to -1 to indicate that they are now invalid, since we’ve got lifted the “pen”
lastX=-1;
lastY=-1;

…and also add the new touchEnd event listener to our init() perform:

canvas.addEventListener(‘touchend’, sketchpad_touchEnd, false);

Line fashion

One remaining point we have to take a look at when drawing strains is setting the line “cap” fashion. That is simply how the top of the line seems to be like, but when it’s not modified from the default setting of “butt”, the strains can look disjointed when drawing, since not sufficient pixels are drawn to connect adjoining strains at totally different angles.

We will do this in the drawLine() perform as follows:

ctx.lineCap = “round”;

You possibly can attempt commenting out this line to see what occurs without it. It’s also possible to use “ctx.lineJoin” to vary the way it seems when two strains be a part of, however it’s not relevant to our sketchpad since we’re solely drawing a single line each time between two co-ordinates, as an alternative of a gaggle of strains directly.


Need to let users submit their footage after drawing them?

Attempt using the canvas toDataURL() perform. It will convert the complete canvas space into a base64 encoded .PNG picture.

You’ll be able to then use this knowledge in a hidden type subject with a submit button to publish the encoded image to your server. You’ll additionally have to strip out a number of the extraneous formatting and convert back from base64 to a binary picture on the server aspect.

Take a look at the reply here using PHP by consumer568021.

Additionally see the picture saving demo code under, which implements a lot of the steps to get the picture on to the server – you’d simply need to switch the PHP script to reserve it (using e.g. the PHP perform file_put_contents() ) as an alternative of sending it back to the consumer.


I simply need to save the Sketchpad as an image?

This is surprisingly a bit harder than it first seems. There are a couple of alternative ways of saving the sketchpad, but they all start with converting the sketchpad knowledge to a picture format similar to PNG first.

The problem is in sending this picture to the browser as a download. When you’re OK about first sending the image to a script on a server, then that is the easiest way for the end-user (aside from a small delay while uploading and downloading the picture.

Here’s a demo page, and right here is the HTML source.

Here is the source for the PHP script (“save-image.php”) we’ll use.

That is what occurs:

  • A “Save Image” button is added to the Sketchpad web page. This button is part of a HTML type.
  • When clicked, a perform is known as, let’s call it saveImageRemote().
  • This perform converts the canvas knowledge into an image (PNG) format using “toDataURL”.
  • The image knowledge is added to a hidden variable in the type (“save_remote_data”) and the form is submitted.
  • A PHP script receives the form knowledge, and converts it into a binary image. Before sending the image again to the browser, it adds Content headers to specify that it’s a downloadable file.
  • The browser receives the info back from the script and begins downloading the image.

Why do we’ve to undergo the unusual steps of importing the picture to a server simply to right away obtain it again?

It’s because we will’t easily pressure the browser to simply accept an image obtain, until that obtain comes from a distant server.

There are ways of forcing the image knowledge into the current browser page (for example, using “window.location.href=image” within the solutions right here),  nevertheless it doesn’t work very properly – there isn’t any .PNG file extension added, and the end-user can’t simply click on on the file to open it.

By sending our picture knowledge to a distant script, we will add the content material headers that inform the browser that it ought to download the file, and specify other knowledge akin to filename and filetype. The drawback of this strategy is that it doesn’t work offline, and there may be a slight delay in importing/downloading for giant sketchpad pictures.

Notice that iOS / Cellular Safari gained’t process image downloads at all – they merely display inside the browser, and the end-user has to long-tap to save lots of them regardless.

I want to have the ability to reserve it offline

Wanting on the earlier instance, we will additionally add a “View Image” button which shows the Sketchpad as a plain image in a new browser tab.

Alternatively, you possibly can provide a thumbnail picture of the sketchpad that updates each time the mouseup or touchend occasions are triggered. We do that within the example above using the “updateImageLocal()” perform.

The consumer can then lengthy faucet or right-click on this thumbnail to save lots of the image (the image can be saved as the complete measurement model).


I want to have multiple Sketchpad on the display

There are a selection of the way of doing this. A method is to create separate Javascript objects for each sketchpad (along with addition HTML canvas parts). It’s extra difficult, but doesn’t require a lot additional code. We might want to eliminate the worldwide canvas and ctx variables since they solely permit for a single canvas and canvas context to be defined.

We will need to move these into a new ‘sketchpad()‘ perform. We may also need to maneuver the event handlers in here.

Take a look at a working example here, and adjusted source code here.

In our new init() perform, we’re creating one or more sketchpads using our new sketchpad() perform. This can mean that every separate sketchpad gets it’s own canvas and context variables.

To make this work properly, we need to preface any variables and features that must be stored local to either sketch1 or sketch2 (in our example), with “this.“.

“this” is just a reference to either sketch1 or sketch2. Once we create sketch1 with the road sketch1 = new sketchpad(‘sketchpad1’) then any reference to “this” is equivalent to referencing the sketch1 object. Once we create sketch2, “this” is a reference to sketch2.

This implies that every set of context and canvas values don’t get shared or combined up between sketch1 and sketch2.

The last modification needed is so as to add “.bind(this)” once we’re including our occasion listeners. This ensures that the features which might be referred to as when the event triggers, also use the right value of “this“.

In other phrases, once we discuss with “this.ctx” within the drawDot() line in sketchpad_touchStart(), it ought to use the identical value of “this” as in the primary “sketchpad()” perform, and subsequently check with the right canvas context.

The “.bind(this)” is used as a result of when an event is triggered, we don’t usually easily have access to whatever the worth of “this” is between where the event handler was added, and the perform that gets referred to as when it triggers. See right here for extra particulars. Bind is a relatively new addition to Javascript that’s out there in IE9 and any new browsers.

We will additionally now simply clear a selected canvas by simply using “sketch1.clearCanvas();” for example. Since it’s merely a traditional perform and not a browser occasion, we don’t have to cope with the bind keyword.


The canvas sketchpad should offer you an excellent basis for understanding interactions between mouse events, touchscreen occasions and the canvas component, even when you determine to make use of an alternate framework later.

Did you find it useful or informative?

Have been you in a position to make use of a few of the ideas in tasks of your personal?

Let us know in the feedback section under.