Book Image

HTML5 Canvas Cookbook

By : Eric Rowell
Book Image

HTML5 Canvas Cookbook

By: Eric Rowell

Overview of this book

The HTML5 canvas is revolutionizing graphics and visualizations on the Web. Powered by JavaScript, the HTML5 Canvas API enables web developers to create visualizations and animations right in the browser without Flash. Although the HTML5 Canvas is quickly becoming the standard for online graphics and interactivity, many developers fail to exercise all of the features that this powerful technology has to offer.The HTML5 Canvas Cookbook begins by covering the basics of the HTML5 Canvas API and then progresses by providing advanced techniques for handling features not directly supported by the API such as animation and canvas interactivity. It winds up by providing detailed templates for a few of the most common HTML5 canvas applications—data visualization, game development, and 3D modeling. It will acquaint you with interesting topics such as fractals, animation, physics, color models, and matrix mathematics. By the end of this book, you will have a solid understanding of the HTML5 Canvas API and a toolbox of techniques for creating any type of HTML5 Canvas application, limited only by the extent of your imagination.
Table of Contents (19 chapters)
HTML5 Canvas Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Canvas Security
Index

Rotating an image


In this recipe, we'll rotate an image by translating and rotating the canvas context, and then drawing an image on the transformed context.

How to do it...

Follow these steps to rotate an image:

  1. Define a canvas context:

    window.onload = function(){
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
  2. Create a new image object and set its onload property:

        var imageObj = new Image();
        imageObj.onload = function(){
  3. When the image loads, translate the context to the center of the canvas, rotate the context by 45 degrees counter-clockwise, and then draw the image:

            // translate context to center of canvas
            context.translate(canvas.width / 2, canvas.height / 2);
            
            // rotate context by 45 degrees counter clockwise
            context.rotate(-1 * Math.PI / 4);
            context.drawImage(this, -1 * imageObj.width / 2, -1 * imageObj.height / 2);
        };
  4. Set the source of the image:

        imageObj.src = "jet_300x214.jpg...