Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial
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 Animated Bubbles

    To grayscale the colors of an image with HTML5 Canvas, we can iterate over all of the pixels in the image, calculate the brightness of each, and then set the red, green, and blue components equal to the brightness.

    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 Colorful Animated Tiles

    To vertically align text with HTML5 Canvas, we can use the textBaseline property of the canvas context. textBaseline can be set with one of the following values: top, hanging, middle, alphabetic, ideographic, and bottom.  Unless otherwise specified, the textBaseline property is defaulted to alphabetic.


  • HTML5 Canvas Exploding Dots

    To define a clipping region using HTML5 canvas, we can draw a path and then use the clip() method of the canvas context.  Everything drawn afterwards will be bound inside the clipping region.  Once we are done drawing things inside the clipping region, we can return the canvas context to its original state with the restore() method so that further drawings are not bound to the clipping region.

    In this tutorial, we'll define a circular clipping region by drawing a circle and then using clip(), and then we'll draw a few circles which are clipped inside the circular path.  Next, we'll restore the canvas context to its original state with the restore() method, and then draw a ring around the original clipping region.


  • HTML5 Canvas Shadow Text Tutorial

    To get the mouse coordinates relative to an HTML5 Canvas, we can create a getMousePos() method which returns the mouse coordinates based on the position of the client mouse and the position of the canvas obtained from the getBoundingClientRect() method of the window object.

    Instructions: Mouseover the canvas to see the mouse coordinates


  • HTML5 Canvas Bursting Particle Effect

    To save and restore different transformation states with the HTML5 Canvas, we can use the save() and restore() methods of the canvas context.

    In this tutorial, we'll save the transformation state by pushing the state onto the state stack immediately before each transformation.  We'll draw a blue rectangle, restore and pop off the last transformation state and draw a red rectangle, restore and pop off the last transformation state and draw a yellow rectangle, and then finally restore and pop off the final transformation state and draw a green rectangle.


  • 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