1. CHAP 2. CANVAS API

2.  Dynamically generate and render graphics, charts, images and animations  SVG (Scalable Vector Graphics) vs. Canvas  Bitmap canvas  Images drawn on a canvas are final and not be resized  Objects drawn on a canvas are not part of the page’s DOM or any namespace  SVG images can be scaled seamlessly at different resolutions and allow hit detection  HTML5 Canvas API  It performs well because it does not have to store objects for every primitive it draws  Relatively easy to implement the Canvas API WHAT IS CANVAS

3.  Element:  Coordinates: CANVAS BrowserDetails ChromeSupported in version 1.0 and greater FirefoxSupported in version 1.5 and greater Internet Explorer Not supported OperaSupported in version 9.0 and greater SafariSupported in version 1.3 and greater

4. CHECKING BROWSER SUPPORT try { document.createElement("canvas").getContext("2d"); document.getElementById("support").innerHTML = "HTML5 Canvas is supported in your browser."; } catch (e) { document.getElementById("support").innerHTML = "HTML5 Canvas is not supported  in your browser."; }

5.  A basic canvas with solid border   Get the canvas element and its context var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');  Draw line  Prepare graph context.beginPath(); context.moveTo(70, 140); context.lineTo(140, 70);  Stroke graph onto the canvas  context.stroke(); CANVAS, DRAW LINE Excerise

6. TRANSFORMATION (TRANSLATE, SCALE, ROTATE)

7.  Get the canvas element and its context  Save the current drawing state context.save();  Move to new coordinate, ex: (50, 100) context.translate(50, 100);  Draw line  Restore the old drawing state context.restore(); TRANSLATION Excerise

8. PATH context.beginPath(); context.moveTo(-25, -50); context.lineTo(-10, -80); context.lineTo(-20, -80); context.lineTo(-5, -110; context.lineTo(-15, -110); context.lineTo(0, -140); context.lineTo(15, -110); context.lineTo(5, -110); context.lineTo(20, -80); context.lineTo(10, -80); context.lineTo(25, -50); ontext.closePath();

9.  Line width  context.lineWidth = 4;  Corner style at path joins (round: 圓角, bevel: 斜角, miter)  context.lineJoin = 'round';  Line style at endpoints (round, square, butt: 預設值 )  Context.lineCap = ‘square';  Stroke style  Change color  context.strokeStyle = '#663300';  Background pattern  Fill Style  Change color  context.fillStyle = '#339900';  Background pattern  Fill the region inside all the closed paths  context.fill();  Fill rectangular content  context.fillRect(x, y, w, h); //ex: context.fillRect(-5, -50, 10, 50); STROKE STYLE

10.  Starting Point: current location  context.quadraticCurveTo(ControlPointX, ControlPointY, EndPointX, EndPointY);  Example:  context.save();  context.translate(-10, 350);  cucontext.moveTo(0, 0);  context.quadraticCurveTo(170, -50, 260, -190);  context.quadraticCurveTo(310, -250, 410, -250);  context.lineWidth = 20;  context.strokeStyle = '#663300';  ontext.stroke();  context.restore(); QUADRATIC CURVE

11.  Load image var img = new Image(); img.src = “bark.jpg”;  Confirm the image is loaded img.onload = function(){ //Draw image onto canvas }  Draw image onto canvas  context.drawImage(image, dx, dy)  context.drawImage(image, dx, dy, dw, dh)  context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)  Example  var bark = new Image();  bark.src = "bark.jpg";  bark.onload = function(){  context.drawImage(bark, -5, -50, 10, 50);  context.stroke();  context.restore();  } IMAGE

12.  Linear Gradient ( 漸層 )  Usage  context.createLinearGradient(x0, y0, x1, y1)  x0, y0 - Line start  x1, y1 - Line end  gradient.addColorStop(offset, color)  offset - From 0.0 to 1.0  color - Use rgba() or HEX  Example  var trunkGradient = context.createLinearGradient(-5, -50, 5, -50);  trunkGradient.addColorStop(0, '#663300');  trunkGradient.addColorStop(0.4, '#996600');  trunkGradient.addColorStop(1, '#552200');  context.fillStyle = trunkGradient;  context.fillRect(-5, -50, 10, 50);  Radical Gradient  Usage  Context.createRadicalGradient(x0, y0, r0, x1, y1, r1)  x0, y0, r0 – First circle center at (x0, y0) with radius r0  x1, y1, r1 – Second circle center at (x1, y1) with radius r1 GRADIENT

13.  Usage  context.createPattern(image, repeat)  repeat - repeat, repeat-x, repeat-y, no-repeat  Example  var gravel = new Image();  gravel.src = "gravel.jpg";  context.save();  context.translate(-10, 390);  gravel.onload = function(){  context.beginPath();  context.moveTo(0, 0);  context.quadraticCurveTo(170, -50, 260, -190);  context.quadraticCurveTo(310, -250, 410, -250);  context.lineWidth = 20;  context.strokeStyle = context.createPattern(gravel, 'repeat');  context.stroke();  context.restore();  } BACKGROUND PATTERN

14.  Usage  context.scale(rx, ry);  rx – width scale ratio  ry – height scale ratio  Example  var canvas = document.getElementById('canvas');  var context = canvas.getContext('2d');  context.save();  context.translate(260, 500);  context.scale(2, 2);  drawTree(context);  context.restore(); SCALE

15.  Usage  context.rotate(angle)  angel can be express with Math.PI/180 * degree  Example  var canvas = document.getElementById('canvas');  var context = canvas.getContext('2d');  context.save();  context.translate(260, 500);  context.rotate(Math.PI/180 * 40);  drawTree(context);  context.restore(); ROTATE

16.  Context.transform(rx, sy, sx, ry, dx, dy)  rx – width scale ratio  ry – height scale ratio  sy – vertical shear  sx – horizontal shear  Example  var canvas = document.getElementById('canvas');  var context = canvas.getContext('2d');  context.save();  context.translate(130, 250);  context.transform(1, 0, -0.5, 1, 0, 0);  context.scale(1, 0.6);  context.fillStyle = 'rgb(0, 0, 0, 0.2)';  context.fillRect(-5, -50, 10, 50);  createCanopyPath(context);  context.fill();  context.restore(); TRANSFORM

17.  Usage  context.fillText(text, x, y, maxwidth)  context.strokeText(text, x, y, maxwidth)  Property  context.font = Font String  context.textAlign = start, end, left, right, center  context.textBaseLine = top, middle, bottom, …  Example  context.save();  context.font = '60px 標楷體 ';  context.fillStyle = '#996600';  context.textAlign = 'center';  context.fillText(' 快樂圖畫 ', 200, 60, 400);  context.restore(); CANVAS TEXT

18.  Usage  shadowColor – Any CSS Color  shadowOffsetX – Pixel Count  shadowOffsetY – Pixel Count  Shadowblur – Gaussian blur  Example  context.shadowColor = 'rgba(0, 0, 0, 0.2)';  context.shadowOffsetX = 15;  context.shadowOffsetY = -10;  context.shadowBlur = 2;  context.font = '60px 標楷體 ';  context.fillStyle = '#996600';  context.textAlign = 'center';  context.fillText(' 快樂圖畫 ', 200, 60, 400); SHADOWS