Using canvas

Canvas is the HTML element. We draw on context of the canvas. The context can be either ‘2d’ or ‘3d’.

They use different JavaScript API. 2d uses the 2d canvas drawing API. While 3d uses WebGL, a version of OpenGL for browser.

We will need to reference the canvas tag occasionally.

1var canvas = $('canvas');
 1var drawingPad = app.drawingPad = {
 2  context: canvas[0].getContext('2d'),
 3  drawLine: function(x1, y1, x2, y2, thickness, strokeStyle) {
 4    this.context.beginPath();
 5    this.context.moveTo(x1,y1);
 6    this.context.lineTo(x2,y2);
 7    this.context.lineWidth = thickness || 1;
 8    this.context.strokeStyle = strokeStyle || "#222";
 9    this.context.stroke();
10  }

What’s next? We’re going to take a look at “Drawing with touch”.

overlaied image when clicked on thumbnail

Makzan | Mobile web app dev with phonegap | Table of Content