Table of Content
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 } 11};
What’s next? We’re going to take a look at “Drawing with touch”.
