Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 has brought some exciting new advantages to the HTML coding world. Canvas allows you to render graphics powered by Javascript. So throw away that flash code and dive into Canvas. Here you will find the best tutorials and resources to learn Canvas and other HTML5 aspects.

  • HTML5 Canvas Gradient Text Tutorial

    To create a mirror transform using HTML5 Canvas, we can apply a negative scale in the x direction to flip the context horizontally, or we can apply a negative scale in the y direction to flip the context vertically.

  • HTML5 Canvas Paint Application

    To create a pattern with the HTML5 Canvas, we can use the createPattern() method of the canvas context which returns a pattern object, set the fillStyle property to the pattern object, and then fill the shape using fill().  The createPattern() method requires an image object and a repeat option, which can be repeat, repeat-x, repeat-y, or no-repeat.  Unless otherwise specified, the repeat option is defaulted to repeat.

  • HTML5 Canvas Text Wrap Tutorial

  • HTML5 Canvas Text Metrics Tutorial

    To invert the colors of an image with HTML5 Canvas, we can iterate over all of the pixels in the image and invert the red, green, and blue components by subtracting each component from the max color value, 255.  Next, we can redraw the inverted image using the updated image data with the putImageData() method, which requires an image data array and a position.

    Note: The getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it.  If this condition is not met, a SECURITY_ERR exception will be thrown.

  • HTML5 Canvas Start and Stop an Animation

    Instructions: Refresh the page to see different randomized trees

  • HTML5 Canvas Color Picker

    To created rounded corners using HTML5 Canvas, we can use the arcTo() method which is defined by a control point, an ending point, and a radius.

  • HTML5 Canvas Load Image Data URL

  • HTML5 Canvas Save Drawing as an Image

    Instructions: Mouse over the Google logo to move the balls around, and then watch them reassemble

  • HTML5 Canvas Get Image Data URL

    To perform a composite operation with HTML5 Canvas, we can use the globalCompositeOperation property of the canvas context.  This property defines the composite operation between the source and destination states of the canvas. destination is defined as the canvas state preceding a composite operation. source is defined as the canvas state following a composite operation.

    We can perform one of twelve composite operations including source-atop, source-in, source-out, source-over, destination-atop, destination-in, destination-out, destination-over, lighter, xor, and copy. Unless otherwise specified, the default composite operation is source-over.

    It's important to note that a canvas context can only support one composite operation throughout its life cycle.  if we want to use multiple composite operations, as this tutorial does, we need to apply the operations on a hidden canvas and then copy the results onto a visible canvas.

  • HTML5 Canvas Machines Vortex

    To set the opacity of elements with the HTML5 Canvas, we can set the globalAlpha property of the canvas context to a real number between 0 and 1, in which 0 is fully transparent and 1 is fully opaque.