Tutorial 16 - Graphics and Imaging

Graphics brings life to applications. JavaScript allows creation and modification of images using HTML5 canvas objects. This basic tutorial introduces some fundamental concepts of graphics and imaging. A more complete tutorial can be found at Mozilla's Canvas Tutorial.

Caution: Currently only gecko (FireFox, SeaMonkey), presto (Opera) and webKit (Chrome, Safari) browser engines support the canvas element. only gecko and webKit support text.

The Canvas
Shapes&Paths

Styles & Patterns
Transforms&Composites

Using Images
Text, Shadows, Fonts

The Canvas

HTML 5 introduces the canvas element which allows JavaScript 2D objects to be used in documents. Artists tend to think in terms of a canvas surface as the foundation for their images and graphics.

<canvas id="canvas" width='100' height='100'>
  Sorry! - Browser does not support Graphics Canvas</canvas>

The canvas origin (0,0) is set at the upper left corner. Output to the canvas takes place through a graphics context encapsulated by the Graphics class. Use getContext(apiName) to get the context. Look ahead in the tutorial for Shapes and Styles.

function draw(){
  var canvas=document.getElementById("canvas");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.fillStyle="rgb(200,0,0)";
  ctx.fillRect(10,10,55,50);
  ctx.fillStyle="rgba(0,0,200,0.5)";
  ctx.fillRect(30,30,55,50);}

Shapes and Paths

There is only one primitive shape: the rectangle. It has three constructors: clearRect(x,y,width,height), fillRect(x,y,width,height) and strokeRect(x,y,width,height).

Paths are used for more complex shapes. Paths are drawn with beginPath(), moveTo(x,y) [pen up], lineTo(x,y) [pen down], closePath(), stroke() [for outlines] and fill() [for filled shapes].

function draw1(){ // lines example
  var canvas=document.getElementById("canvas1");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.beginPath(); // Filled triangle
  ctx.moveTo(25,25);ctx.lineTo(105,25);
  ctx.lineTo(25,105);ctx.fill();
  ctx.beginPath(); // Stroked triangle
  ctx.moveTo(125,125);ctx.lineTo(125,45);
  ctx.lineTo(45,125);ctx.closePath();
  ctx.stroke();}

Arcs are drawn with arc(x,y,radius,sAng,eAng,rotFlag). sAng and eAng are in radians (note: a simple conversion is var radians=(Math.PI/180)*degrees). rotFlag is boolean.

function draw2(){ // arcs example
  var canvas=document.getElementById("canvas2");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");ctx.beginPath();
  ctx.arc(75,75,50,0,Math.PI*2,true); // Face
  ctx.moveTo(110,75);
  ctx.arc(75,75,35,0,Math.PI,false);  // Mouth
  ctx.moveTo(65,65);
  ctx.arc(60,65,5,0,Math.PI*2,true);  // Left eye
  ctx.moveTo(95,65);
  ctx.arc(90,65,5,0,Math.PI*2,true);  // Right eye
  ctx.stroke();}

function draw3(){ // more arcs
  var canvas=document.getElementById("canvas3");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  for(i=0;i<4;i++){
    for(j=0;j<3;j++){
      ctx.beginPath();
      var x=25+j*50;var y=25+i*50;
      var radius=20;var sAngle=0;
      var eAngle=Math.PI+(Math.PI*j)/2;
      var rotate=i%2===0?false:true;
      ctx.arc(x,y,radius,sAngle,eAngle,rotate);
      if(i>1){ctx.fill();}else{ctx.stroke();}
    } } }

Bezier curves are used to draw complex shapes. They have either one: quadraticCurveTo(cp1x,cp1y,x,y) or two: bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)control points.

function draw4(){ // Bezier curves example
  var canvas=document.getElementById("canvas4");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");
  ctx.beginPath();ctx.moveTo(75,40);
  ctx.bezierCurveTo(75,37,70,25,50,25);
  ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
  ctx.bezierCurveTo(20,80,40,102,75,120);
  ctx.bezierCurveTo(110,102,130,80,130,62.5);
  ctx.bezierCurveTo(130,62.5,130,25,100,25);
  ctx.bezierCurveTo(85,25,75,37,75,40);
  ctx.fill();}

Styles and Patterns

Fill patterns control how a drawn object is filled in with ink. Color is the common fill pattern used. Inkwells are filled with fillStyle=colorVal and strokeStyle=colorVal. colorVal has several formats: hex (eg #rrggbb), named (eg red), rgb (eg rgb(r, g, b)) and alphaTransparency (eg rgba(r, g, b, a).

Line strokes can be styled in several ways. The properties are lineWidth [int], lineCap [butt|round|square] and lineJoin [round|bevel|mitre]. mitreLimit can be set and if exceeded bevel style is forced.

Gradient objects are created with createLinearGradient(x1, y1, x2, y2) or createRadialGradient(x1, y1, r1, x2, y2, r2). colors are added with addColorStop(posn, colorVal). posn can be from 0 to 1.

function draw5(){
  var canvas=document.getElementById('canvas5');
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext('2d');
  var lingrad=ctx.createLinearGradient(0,0,0,150);
  lingrad.addColorStop(0,'#00ABEB');
  lingrad.addColorStop(0.5,'#fff');
  lingrad.addColorStop(0.5,'#26C000');
  lingrad.addColorStop(1,'#fff');
  var lingrad2=ctx.createLinearGradient(0,50,0,95);
  lingrad2.addColorStop(0.5,'#000');
  lingrad2.addColorStop(1,'rgba(0,0,0,0)');
  ctx.fillStyle=lingrad;ctx.strokeStyle=lingrad2;
  ctx.fillRect(10,10,130,130);ctx.strokeRect(50,50,50,50);}

Pattern objects are created with createPattern(img, repVal). repVal is one of repeat, repeat-x, repeat-y, no-repeat. Refer to next section for img.

Transformations & Composites

Transformation methods include translate, rotate, scale and the generic transform.

Objects are normally placed on top of the canvas, covering previous objects. globalCompositeOperation allows placing under another object or other more complex method of masking.

Clipping provides complex masking screens.

Using Images

Images can be loaded from a file and drawn to the canvas for editing. Preloading is recommended. They can then be scaled and/or sliced (ie cropped).

function draw6(){ // images example
  var canvas=document.getElementById("canvas6");
  if(!canvas.getContext){return;}
  var ctx=canvas.getContext("2d");var img=new Image();
  img.onload=function(){ctx.drawImage(img,0,0);};
  img.src='images/tpot.jpg';}

Text, Shadows, Fonts

Text can be added to a canvas using the properties: font, textAlign & textBase; and the methods: fillText(txt,x,y[,width]) & strokeText(txt,x,y[,width]). Shadows are drawn using the properties: shadowOffsetX, shadowOffsetY, shadowBlur and shadowColor. The use of text objects in canvas is documented at Whatwg and developer.mozilla.org.

Note: Text objects are available only in gecko and webKit!

function draw7(){
  var canvas=document.getElementById("canvas7");
  if(!canvas.getContext){return;}
  ctx=canvas.getContext('2d');
  drawText(ctx,'16pt Times New Roman','rgba(0,0,255,0.5)',
    3,30,'16pt Times');
  drawText(ctx,'14pt Verdana','green',3,50,'14pt Verdana');
  drawText(ctx,'12pt Times New Roman','black',3,70,'12pt Times');
  ctx.shadowOffsetX=2;ctx.shadowOffsetY=2;
  ctx.shadowBlur=2;ctx.shadowColor="rgba(0,0,0,0.5)";
  drawText(ctx,'12pt Times New Roman','Black',3,90,'with Shadow');}

JR's HomePage | Comments [jstutorg.htm:2010 01 27]