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 Text Wrap Tutorial

    To wrap text with HTML5 Canvas, we can create a custom function that requires the canvas context, a text string, a position, a max width, and a line height. The function should use the measureText() method of the canvas context to calculate when the next line should wrap.


  • HTML5 Canvas Text Metrics Tutorial

    To get the text metrics of HTML5 Canvas text, we can use the measureText() method of the canvas context which returns an object containing a width property.  This method requires a text string and returns a metrics object based on the provided text and the current text font assigned to the context.

    Note: Since the height of the text in pixels is equal to the font size in pts when the font is defined with the font property of the canvas context, the metrics object returned from measureText() does not provide a height metric.


  • HTML5 Canvas Start and Stop an Animation

    To start an HTML5 Canvas animation, we can can continually request a new animation frame, and to stop the HTML5 Canvas animation, we can simply not request a new animation frame.

    Instructions: Click on the canvas to start and stop the animation.


  • HTML5 Canvas Color Picker

    Instructions: Mousedown in the color area to choose a color.


  • HTML5 Canvas Load Image Data URL

    To load the canvas with an image data URL, we can make an AJAX call to get a data URL, create an image object with the URL, and then draw the image onto the canvas with the drawImage() method of the canvas context.


  • HTML5 Canvas Save Drawing as an Image

    To save the canvas drawing as an image, we can set the source of an image object to the image data URL.  From there, a user can right click on the image to save it to their local computer.  Alternatively, we could also open up a new browser window with the image data url directly and the user could save it from there.

    Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it.  If this condition is not met, a SECURITY_ERR exception is thrown.


  • HTML5 Canvas Get Image Data URL

    To get the image data URL of the canvas, we can use the toDataURL() method of the canvas object which converts the canvas drawing into a 64 bit encoded PNG URL.  If you'd like for the image data URL to be in the jpeg format, you can pass image/jpeg as the first argument in the toDataURL() method. If you'd like to control the image quality for a jpeg image, you can pass in a number from 0 to 1 as the second argument to the toDataURL() method.

    Note: The toDataURL() method requires that any images drawn onto the canvas are hosted on a web server with the same domain as the code executing it.  If this condition is not met, a SECURITY_ERR exception is thrown.


  • HTML5 Canvas Machines Vortex

  • HTML5 Canvas Harmonic Oscillator

  • HTML5 Canvas Oscillating Bubble