Simple Animation in the HTML5 Canvas Element

Friday, February 28, 2014 Sandeep Likhar 0 Comments

HTML5 is generating all kinds of buzz these days. Some of the buzz is about HTML5 being a replacement for Adobe’s Flash. I don’t think it’s there yet but it’s certainly on the way to changing the way content is presented on the web. This is a description of a very simple animation in an HTML5 canvas element. It is coded for readability and not for optimized operation.

We’ll add a canvas element to a web page and then use javascript to draw on it. We will redraw it all every 10 milliseconds with minor changes to create the magical illusion of animation. Using javascript allows all the redrawing to occur in the browser as opposed to on the server which would require communication between the browser and server.

Here is the code for the page we will be discussing.
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Canvas Test</title>
  </head>
<body>
  <section>
    <div>
        <canvas id="canvas" width="400" height="300">
         This text is displayed if your browser 
         does not support HTML5 Canvas.
        </canvas>
    </div>

0 comments:

Canvas tutorial

Sunday, February 23, 2014 Sandeep Likhar 0 Comments

<canvas> is an HTML element which can be used to draw graphics using scripting (usually JavaScript). It can, for instance, be used to draw graphs, make photo compositions or do simple (and not so simple) animations. The image on the right shows some examples of <canvas> implementations which we will see later in this tutorial.
<canvas> was first introduced by Apple for the Mac OS X Dashboard and later implemented in Safari and Google Chrome. Gecko 1.8-based browsers, such as Firefox 1.5, also support this element. The <canvas> element is part of the WhatWG Web applications 1.0 specification also known as HTML5.
This tutorial describes how to use the <canvas> element to draw 2D graphics, starting with the basics. The examples provided should give you some clear ideas what you can do with canvas and will provide code snippets that may get you started in building your own content.

Before you start

Using the <canvas> element isn't very difficult but you do need a basic understanding of HTML and JavaScript. The <canvas> element isn't supported in some older browsers, but is supported in recent versions of all major browsers.The default size of the canvas is 300px * 150px (width * height). But custom sizes can be defined using CSS height and width property. In order to draw graphics on the canvas we use a javascript context object, which creates graphics on the fly.

In this tutorial

0 comments:

Canvas Basic animations

Sunday, February 23, 2014 Sandeep Likhar 0 Comments

Since we're using JavaScript to control <canvas> elements, it's also very easy to make (interactive) animations. Doing more complex animations can take a little extra work; we hope to introduce a new article to help with that soon.
Probably the biggest limitation is that once a shape gets drawn it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

Basic animation steps

These are the steps you need to take to draw a frame:
  1. Clear the canvas
    Unless the shapes you'll be drawing fill the complete canvas (for instance a backdrop image), you need to clear any shapes that have been drawn previously. The easiest way to do this is using the clearRect() method.
  2. Save the canvas state
    If you're changing any setting (such as styles, transformations, etc) which affect the canvas state and you want to make sure the original state is used each time a frame is drawn, you need to save that original state.
  3. Draw animated shapes

0 comments:

Canvas Compositing

Monday, February 17, 2014 Sandeep Likhar 0 Comments

In all of our previous examples, shapes were always drawn one on top of the other. This is more than adequate for most situations, but it limits the order in which composite shapes are built. We can, however, change this behaviour by setting the globalCompositeOperation property.

globalCompositeOperation

We can not only draw new shapes behind existing shapes but we can also use it to mask off certain areas, clear sections from the canvas (not limited to rectangles like the clearRect() method does) and more.
globalCompositeOperation = type
This sets the type of compositing operation to apply when drawing new shapes, where type is a string identifying which of the twelve compositing operations to use.

0 comments:

Canvas Transformations

Friday, February 14, 2014 Sandeep Likhar 0 Comments

Saving and restoring state

Before we look at the transformation methods, let's look two other methods which are indispensable once you start generating ever more complex drawings.
save()
Saves the entire state of the canvas.
restore()
Restores the most recently saved canvas state.
Canvas states are stored on a stack. Every time the save() method is called, the current drawing state is pushed onto the stack. A drawing state consists of
  • The transformations that have been applied (i.e. translate, rotate and scale - see below).
  • The values of strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur,shadowColor, globalCompositeOperation properties.

0 comments:

Applying styles and colors to a Canvas

Thursday, February 13, 2014 Sandeep Likhar 0 Comments

 In the chapter about drawing shapes, we used only the default line and fill styles. In this chapter, we will explore all the canvas options we have at our disposal to make our drawings a little more attractive.

Colors

Up until now we've only seen methods of the drawing context. If we want to apply colors to a shape, there are two important properties we can use:fillStyle and strokeStyle.
fillStyle = color
Sets the style used when filling shapes.
strokeStyle = color
Sets the style for shapes' outlines.
color is a string representing a CSS <color>, a gradient object, or a pattern object. We'll look at gradient and pattern objects later. By default, the stroke and fill color are set to black (CSS color value #000000).
Note: When you set the strokeStyle and/or fillStyle property, the new value becomes the default for all shapes being drawn from then on. For every shape you want in a different color, you will need to reassign the fillStyle or strokeStyle property.
The valid strings you can enter should, according to the specification, be CSS3 <color> values. Each of the following examples describe the same color.

0 comments:

Canvas Shapes Using images

Wednesday, February 12, 2014 Sandeep Likhar 0 Comments

One of the more exciting features of <canvas> is the ability to use images. These can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth. External images can be used in any format supported by the browser, such as PNG, GIF, or JPEG. You can even use the image produced by other canvas elements on the same page as the source!
Importing images into a canvas is basically a two step process:
  1. Get a reference to an HTMLImageElement object or to another canvas element as a source. It isn't possible to use images by simply providing a URL or path to them.
  2. Draw the image on the canvas using the drawImage() function.
Let's take a look at how to do this.

Getting images to draw

0 comments:

Drawing shapes with canvas

Tuesday, February 11, 2014 Sandeep Likhar 0 Comments

The grid

Before we can start drawing, we need to talk about the canvas grid or coordinate space. The HTML template on the previous page had a canvas element 150 pixels wide and 150 pixels high. To the right, you see this canvas with the default grid overlayed. Normally 1 unit in the grid corresponds to 1 pixel on the canvas. The origin of this grid is positioned in the top left corner (coordinate (0,0)). All elements are placed relative to this origin. So the position of the top left corner of the blue square becomes x pixels from the left and y pixels from the top (coordinate (x,y)). Later in this tutorial we'll see how we can translate the origin to a different position, rotate the grid and even scale it. For now we'll stick to the default.

Drawing rectangles

Unlike SVG, <canvas> only supports one primitive shape: rectangles. All other shapes must be created by combining one or more paths. Luckily, we have an assortment of path drawing functions which make it possible to compose very complex shapes.

0 comments:

Basic usage of Canvas

Tuesday, February 11, 2014 Sandeep Likhar 0 Comments

The <canvas> element

Let's start this tutorial by looking at the <canvas> element itself.
<canvas id="tutorial" width="150" height="150"></canvas>
This looks a lot like the <img> element, the only difference is that it doesn't have the src and alt attributes. The <canvas> element has only two attributes - width and height. These are both optional and can also be set using DOM properties. When no width and height attributes are specified, the canvas will initially be 300 pixels wide and 150 pixels high. The element can be sized arbitrarily by CSS, but during rendering the image is scaled to fit its layout size.
Note: If your renderings seem distorted, try specifying your width and height attributes explicitly in the <canvas> attributes, and not using CSS.
The id attribute isn't specific to the <canvas> element but is one of the default HTML attributes which can be applied to (almost) every HTML element (likeclass for instance). It's always a good idea to supply an id because this makes it much easier to identify it in our script.

0 comments:

How to use HTML5′s drag and drop

Monday, February 10, 2014 Sandeep Likhar 0 Comments

Drag and drop is a part of the HTML5 standard.

Drag and Drop

Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location.

In HTML5, drag and drop is part of the standard, and any element can be draggable.

Browser Support

0 comments:

Subscribe to: Comments (Atom)
Powered by Blogger.