CHAP 2. CANVAS API

 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

 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

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."; }

 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

TRANSFORMATION (TRANSLATE, SCALE, ROTATE)

 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

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();

 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

 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

 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

 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

 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

 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

 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

 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

 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

 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