Tag: Canvas

Posted on

Record and Playback Drawing in HTML5 Canvas – Part II

A reader of my blog post De/Serializing Recordings in Recordable HTML5 Canvas had asked me how to change stroke color and size when recording. I told him that this could be done by adding actions, like setColor and setStrokeSize. For more information about how the recordable canvas was implemented, see my blog post Record and Playback Drawing in HTML5 Canvas . I have updated the example with following new features –

  • Setting stroke color and size – both for drawing and recording
  • Pausing and resuming recording. You may want to pause recording if, for example, you do not want to record time delay when you select stroke color/size. Duration of time that the recording is paused is skipped when playing back the recording.

Here is the demo of how the new features work. Select a color by clicking on any color box on the right side of the canvas. Default selection is black. Currently selected color is displayed in a little bigger box with rounded corner. To select stroke size, I have added a few predefined circles of different sizes on the right side. Currently selected stroke size is displayed in black.

Continue reading “Record and Playback Drawing in HTML5 Canvas – Part II”

Posted on

De/Serializing Recordings in Recordable HTML5 Canvas


Last year I blogged about creating a recordable HTML5 Canvas. I explained how to record strokes/drawings created on a HTML5 Canvas and play them back. There are a couple of comments on that post asking me to explain how to save recordings and load them back. Serialization and deserialization of recordings was on my to-do list for a long time and finally this week I got around to implement it. There are different ways to serialize and deserialize recordings, and I have implemented a simple method – using JSON. The serialized data is a bit verbose because of descriptive variable names I have used, but you can change that easily.

RecordableDrawing (in this script file) function remains unchanged. I have added a new file drawingSerializer.js . Two important functions in this file are serializeDrawing and deserializeDrawing.
serializeDrawing takes a RecordableDrawing object as argument and returns JSON string containing array of recordings.
deserializeDrawing takes a String (serialized data) as argument and returns array of Recording objects.

To see how serialization and deserialization works, follow these steps – Continue reading “De/Serializing Recordings in Recordable HTML5 Canvas”

Posted on

Record and Playback Drawing in HTML5 Canvas

A few months back I had created an application that recorded and played back drawings on HTML5 Canvas. For some time now I wanted to refactor the code in that application and create a reusable ‘component’ from it. Which is what I did this week.

Go ahead and try the demo first – Press ‘Record’ key below and then draw some strokes/lines in the box with the mouse (holding down left button). Once you are done, click Stop button. Click ‘Play’ button to play back the drawing you just drew. You can pause and resume too.

Continue reading “Record and Playback Drawing in HTML5 Canvas”

Posted on

Collision Detection in HTML5 2D Games


I wanted to make the Simple HTML5 Game I had created a couple of weeks back a little more interesting. I decided that I would add some obstacles in the way of the moving object. The goal then would be to prevent the moving object from hitting the obstacles and boundaries of the Canvas. This required implementation of collision detection (between moving object and obstacles) logic. If shape of the image is rectangular, then it is easy to detect collision; this is something I had already implemented in the last game, where I checked if the moving object hits any of the four boundaries. But if shape of the image is irregular, then it requires a bit more work to detect collision. But first, try out the modified game below and see how collision detection works –
Continue reading “Collision Detection in HTML5 2D Games”

Posted on

JavaScript Graphics Libraries

Last year I was evaluating options for JavaScript graphics libraries for ColdFusion Builder ORM extension. The extension lets you select tables from a datasource and displays it in a browser window. You can them configure relationships, table fields, data types etc and generate CFC code. Here is the screen shot of that extension.

I evaluated SVG and Canvas for graphics/drawing in this extension. However Canvas was not supported in Internet Explorer at that time. SVG was supported on all desktop browsers, but Android browser at that time did support SVG (Android version was 2.2 then) . Since this application was meant to be used on desktop, I decided to go with SVG. Fortunately I came across a very good SVG JavaScript library, RaphaelJS, which made drawing and manipulating shapes in the web page a lot easier. I used JQuery + RaphaelJS together in my application. I used these two libraries for my another extension to monitor CF server memory.
Continue reading “JavaScript Graphics Libraries”

Posted on

Improving Animation Performance in HTML5 Canvas – Part II

In this post I had described how I was able to improve performance of animation in HTML5 Canvas by using a backup Canvas. The trick was to draw static part of the main Canvas on the backup Canvas and whenever any object moves (during animation), draw the content of backup Canvas on to the main Canvas first and then draw moving objects. I had optimised this by copying only a part from the backup Canvas that was exposed by the moving object. This gave me much better animation performance than redrawing scene every time.

Though the animation was better, I was still not happy with the performance. It worked fine on small devices like phones, but animation was still not very smooth on tablets. So I started looking for ways to improve it further.
Continue reading “Improving Animation Performance in HTML5 Canvas – Part II”

Posted on

Improving Animation Performance in HTML5 Canvas

I have been working on an application that performs some animation in HTML5 Canvas. The animation involves drawing of stokes,images and moving images. Initially I took the easiest path for coding animation, which is clearing canvas every time and drawing new positions of objects. When tested this application on my laptop, in Chrome, everything worked fine and performance was satisfactory.

However when I ran the same application on my Xoom tablet, animation was extremely slow. Obviously clearing canvas and redrawing everything again and again was not a good idea. I did know that this approach was bad for animation, but since it worked fine on my laptop, I did not bother to change it initially. However I was surprised by how bad it performed on Android. I saw many complaints about performance of Canvas on Android in many forum posts and blogs. Apparently, as per many posts, performance of Canvas is much better on iOS than Android, but I can’t confirm this.
Continue reading “Improving Animation Performance in HTML5 Canvas”

Social