HTML Canvas: Basic operations

• HTML5 Canvas ELEMENTHTML5 Canvas element

  <canvas id= "MyCanvas" width= "height=" >

  HTML5 canvas element with fallback content

  <canvas id= "MyCanvas" width= "$" height= "> your browser  doesn ' t support canvas!</canvas>

  2d Context

  var context = Canvas.getcontext (' 2d ');

  Webgl Context (3d)

  var context = Canvas.getcontext (' WebGL ');

• Shapesdraw Rectangle

  Context.rect (x, y, width, height); Context.fill (); Context.stroke ();

  Fill Rectangle Shorthand

  Context.fillrect (x, y, width, height);

  Stroke Rectangle Shorthand

  Context.strokerect (x, y, width, height);

  Draw Circle

  Context.arc (x, y, radius, 0, Math.PI * 2); Context.fill (); Context.stroke ();

• Stylesfill

  Context.fillstyle = ' red '; Context.fill ();

  Stroke

  Context.strokestyle = ' red '; Context.stroke ();

  Linear Gradient

  var grd = context.createlineargradient (x1, y1, x2, y2); Grd.addcolorstop (0, ' red ');   Grd.addcolorstop (1, ' Blue '); Context.fillstyle = Grd;context.fill ();

  Radial Gradient

  var grd = context.createradialgradient (x1, y1, Radius1, x2, Y2, radius2); Grd.addcolorstop (0, ' red '); Grd.addcolorstop (1, ' Blue '); Context.fillstyle = Grd;context.fill ();

  Pattern

  var imageobj = new Image (), imageobj.onload = function () {  var pattern = Context.createpattern (imageobj, ' repeat '); 
       context.fillstyle = pattern;  Context.fill ();}; IMAGEOBJ.SRC = ' path/to/my/image.jpg ';

  Line Join

  Context.linejoin = ' Miter|round|bevel ';

  Line Cap

  Context.linecap = ' Butt|round|square ';

  Shadow

  Context.shadowcolor = ' black '; context.shadowblur = 20;context.shadowoffsetx = 10;context.shadowoffsety = 10;

  Alpha (Opacity)

  Context.globalalpha = 0.5; Between 0 and 1

• COLOR formatsstring

  Context.fillstyle = ' red ';

  Hex Long

  Context.fillstyle = ' #ff0000 ';

  Hex Short

  Context.fillstyle = ' #f00 ';

  Rgb

  Context.fillstyle = ' rgb (255,0,0) ';

  RGBA

  Context.fillstyle = ' Rgba (255,0,0,1) ';

• Pathsbegin Path

  Context.beginpath ();

  Line

  Context.lineto (x, y);

  Arc

  Context.arc (x, y, radius, startangle, Endangle, counterclockwise);

  Quadratic curve

  Context.quadraticcurveto (CX, CY, X, y);

  Bézier curve

  Context.beziercurveto (cx1, Cy1, CX2, Cy2, x, y);

  Close Path

  Context.closepath ();

• imagesdraw image with default Size

  var imageobj = new Image (); imageobj.onload = function () {context.drawimage (imageobj, x, y);}; IMAGEOBJ.SRC = ' path/to/my/image.jpg '; 

  Draw image and set Size

  var imageobj = new Image (); imageobj.onload = function () {Context.drawima GE (imageobj, x, y, width, height);}; IMAGEOBJ.SRC = ' path/to/my/image.jpg '; 

  Crop image

  var imageobj = new Image (); imageobj.onload = function () {Context.drawimage (imageobj , SX, SY, SW, SH, dx, dy, DW, DH);}; IMAGEOBJ.SRC = ' path/to/my/image.jpg '; 

• textfill text

  context.font = ' 40px Arial '; context.fillstyle = ' red '; Context.filltext (' Hello world! ', x, y); 

  Stroke text

  context.font = ' 40pt Arial '; context.strokestyle = ' red '; Context.stroketext (' Hello world! ', x, y); 

  Bold Text

  context.font = ' bold 40px Arial '; 

  Italic text

  context.font = ' Italic 40px Arial '; 

  Text align

  context.textalign = ' start|end|left|center|right '; 

  Text baseline

  context.textbaseline = ' top|hanging|middle|alphabetic|ideographic|bottom '; 

  Get Text width

  var width = context.measuretext (' Hello World '). Width; 

• Transformstranslate

  Context.translate (x, y);

  Scale

  Context.scale (x, y);

  Rotate

  Context.rotate (radians);

  Flip horizontally

  Context.scale (-1, 1);

  Flip vertically

  Context.scale (1,-1);

  Custom Transform

  Context.transform (A, B, C, D, E, f);

  Set Transform

  Context.settransform (A, B, C, D, E, f);

  Shear

  Context.transform (1, SY, SX, 1, 0, 0);

  Reset

  Context.settransform (1, 0, 0, 1, 0, 0);

• State Stackpush state onto Stack

  Context.save ();

  Pop state off of Stack

  Context.restore ();

• Clippingclip

  Draw path Herecontext.clip ();

• Image Dataget Image Data

  var imageData = Context.getimagedata (x, y, width, height); var data = Imagedata.data;

  Loop Through Image Pixels

  var imageData = Context.getimagedata (x, y, width, height); var data = Imagedata.data;var len = Data.length;var i, red, gree N, Blue, alpha;for (i = 0; i < len; i + = 4) {  red = data[i];  Green = Data[i + 1];  Blue = Data[i + 2];  Alpha = Data[i + 3];}

  Loop Through Image Pixels with coordinates

  var imageData = Context.getimagedata (x, y, width, height); var data = Imagedata.data;var x, y, red, green, blue, alpha;for ( y = 0; Y < ImageHeight; y++) {for  (x = 0; x < imagewidth; + +) {    red = data[((imagewidth * y) + x) * 4];    Green = data[((imagewidth * y) + x) * 4 + 1];    Blue = data[((imagewidth * y) + x) * 4 + 2];    Alpha = data[((imagewidth * y) + x) * 4 + 3];}  }

  Set Image Data

  Context.putimagedata (ImageData, x, y);

• Data urlsget Data URL

  var dataurl = Canvas.todataurl ();

  Render Canvas with Data URL

  var imageobj = new Image (), imageobj.onload = function () {  context.drawimage (imageobj, 0, 0);}; IMAGEOBJ.SRC = Dataurl;

• Compositescomposite Operations

  Context.globalcompositeoperation = ' source-atop|source-in|source-out|source-over|destination-atop|destination-in |destination-out|destination-over|lighter|xor|copy ';

HTML Canvas: Basic operations