QtWebKit Guide - Canvas Graphics

Drawing Rectangles

The rectangle is the only geometric shape that is built in to the canvas API. You can draw an outline of a rectangle, a filled rectangle, and a filled rectangle with clear parts. You do not have to create a path to draw a rectangle.

To draw an outline of a rectangle, use the strokeRect() method.

To draw a filled rectangle, use the fillRect() method. The default fill color is black.

To clear part of a filled rectangle, use the clearRect() method.

Each method accepts the following series of arguments:

• x is the position on the canvas to the right of the origin (0,0) of the top left corner of the rectangle
• y is the position on the canvas below the origin of the top left corner of the rectangle
• width is the width of the rectangle to be drawn
• height is the height of the rectangle to be drawn

For example, the following code draws concentric rectangles:

     var context = canvas.getContext("2d");
     canvas.strokeRect(50,50,50,50);
     canvas.fillRect(60,60,30,30);
     canvas.clearRect(70,70,10,10);

Drawing Lines

To draw a line, you first have to "put your pencil down" on the canvas by creating a path. The context.beginPath() method sets a new path in the canvas. Each line that you draw is stored as a sub-path. Sub-paths can be closed to form a shape, or they can be left open. Each time you want to draw a new shape, you have to call the beginPath() method to reset the current path.

After calling beginPath(), you set your starting position on the canvas by calling the context.moveTo(x,y) method. The moveTo(x,y) method creates a new subpath on the canvas that begins at the Cartesian point (x,y).

To draw a straight line, call the context.lineTo(x,y) method. This adds the point (x,y) to the current subpath and connects it to the previous subpath by a straight line. In other words, (x,y) are the coordinates of the line's endpoint. For example:

     context.beginPath();
     context.moveTo(10,10);
     context.lineTo(30,30);

To get the pencil to actually draw on the canvas, first use the strokeStyle property to set the color to a value such as black (#000):

     context.strokeStyle(#000);

(The strokeStyle property can be a CSS color, a pattern, or a gradient.) Then use the context.stroke() method to actually draw the line on the canvas:

     context.stroke();

This produces the image below. The numeric coordinates are added for clarity but are not part of the image drawn by the code:

To create a shape, call the context.closePath() method:

     context.closePath();
     context.moveTo(10,10);        // starting point
     context.lineTo(30,30);        // specify first line
     context.moveTo(30,30);        // move to end of first line
     context.lineTo(60,10);        // specify second line
     context.moveTo(60,10);        // move to end of second line
     context.lineTo(10,10);        // specify third line to close triangle
     context.strokeStyle("#000");    // use black color for lines
     context.stroke();        // draws the triangle lines on the canvas

To fill the shape, use the fillstyle property and the fill() method:

     context.fillStyle("#FF0000"); // use red color for fill
     context.fill(); // fill the triangle

The commands, if coded fully, would create the shape below:

Note: It is not necessary to close the path when calling the fill() method. Calling fill() closes the path and creates the completed shape.

You can draw lines of various widths, endcap types, and joining options by configuring the following attributes:

• lineWidth sets the thickness of the current line. The value can be any number greater than 0. For example, context.lineWidth = 10 sets the line thickness to 10 units. The default value is 1 unit, which is not the same as 1 pixel. Instead, the line is centered on the current path, with half its thickness on each side of the path.
• lineCap sets the type of endpoint of the current line. The value can be either butt, square, or round. (The default value is butt.)
  • butt- the ends of the line abutt the line guide.
  • square adds a box at both ends of the line.
  • round adds a semicircle at both ends of the line.
• lineJoin sets the style with which lines are joined. The value can be either bevel, round, or miter. (The default value is miter.)
  • bevel flattens the corners at which the lines join
  • round rounds the corners at which the lines join
  • miter joins the lines at a single point
• miterLimit sets the miter limit ratio. The value can be any number greater than 0. The miter limit ratio determines how far the connection point of the outside of the lines can be from the connection point of the inside of the lines. (The default value is 10.)

Drawing Arcs

To draw an arc, you begin with the same steps your followed to create a line:

1. Call the context.beginPath() method to "put your pencil down" on the canvas and set a new path.
2. Call the context.moveTo(x,y) method to set your starting position on the canvas at the point (x,y).
3. To draw an arc or circle, call the context.arcTo(x1,y1,x2,y2,radius) method. This adds an arc with starting point (x1,y1), ending point (x2,y2), and radius radius to the current subpath and connects it to the previous subpath by a straight line.

   

4. An alternative way to draw an arc or circle is to call the context.arc(x,y,radius,startAngle,endAngle,anticlockwise) method. This adds an arc to the current subpath that lies on the circumference of the circle whose center is at the point (x,y) and whose radius is radius.

   

   Both startAngle and endAngle are measured from the x axis in units of radians.

   A complete circle is 360 degrees, or 2Π radians. A semicircle is 180 degrees, or Π radians. The number of radians is the number of degrees multiplied by Π/180, expressed in JavaScript as:

        var radians = (Math.PI/180)*degrees;

   

   anticlockwise has the value TRUE for each arc in the figure above because they are all drawn in the counterclockwise direction.

5. To create a shape, call the context.closePath() method. This marks the current subpath as closed and draws a straight line from the current point to the first point in the path.
6. To draw only the outline of the shape, call the context.stroke() method.
7. To fill in the shape, call the context.fill() method.
8. To set the color of the fill, set the strokeStyle. For example, the code

        context.strokeStyle = "#FF0000";

   sets the fill color to red.

Note: It is not necessary to close the path if you are going to call the fill() method. The fill closes the path and creates the completed shape.

To create complex shapes, combine lines and arcs:

1. Call the context.beginPath() method to "put your pencil down" on the canvas and set a new path.
2. Call the context.moveTo(x,y) method to set your starting position on the canvas at the point (x,y).
3. Draw any combination of lines and arcs by calling the lineTo, arcTo, arc, moveTo, closePath, stroke, and fill methods and setting the line attributes and fill colors as described above.

You can also create complex shapes by removing portions of the shapes you draw. The clip() method creates a clipping path that defines the area along which your "scissor" will cut. Any parts of the shape outside the clipping path are not displayed. To create a complex shape using the clip() method:

1. Call the context.beginPath() method to set the clipping path.
2. Define the clipping path by calling any combination of the lineTo, arcTo, arc, moveTo, and closePath methods.
3. Call the context.clip() method.

The new shape displays. The following shows how a clipping path can modify how an image displays:

Compositing

You can build complex shapes by drawing shapes on top of each other. It is also possible to draw shapes behind existing shapes and to mask parts of shapes by using compositing operations. The globalCompositeOperation attribute sets the way shapes can be combined.

The first shape drawn on the canvas to which additional shapes are added is called the destination shape. The shape drawn on the canvas afterwards to create the composite image is called the source shape. The value of the globalCompositeOperation attribute must be set to one of the following:

• source-over displays the source (newer) shape over the destination (older) shape unless the source shape is transparent. (This is the default value)
• source-in displays only the portion of the source shape that is opaque and overlaps the destination shape. Everything else is transparent.
• source-out displays only the portion of the source shape that does not overlap the destination shape.
• source-atop displays only the portion of the opaque source shape that overlaps the destination shape and the portion of the destination shape that is not covered by the opaque source shape.
• destination-over displays the destination shape over the source shape. In areas where both shapes are opaque and overlap, the older shape displays.
• destination-in displays only the portion of the destination shape that is opaque and overlaps the source shape. Everything else is transparent. The source (newer) shape is not visible.
• destination-out displays only the portion of the destination shape that does not overlap the source shape. The source shape is not visible.
• destination-atop displays only the portion of the opaque destination shape that overlaps the source shape and the portion of the source shape that is not covered by the opaque destination shape.
• lighter displays both the source and destination shapes. Where the shapes overlap, the their color values are added, producing a lighter color.
• copy displays only the source shape. The destination shape is ignored.
• xor displays both the source and the destination shapes except the areas of overlap, in which both shapes are completely transparent.

The following figure shows the various compositing effects:

Saving and Exporting Canvas Drawings as Image Files

You can save or export your canvas drawings as .png or .jpeg image files by calling the toDataURL() method:

 canvas.toDataURL([type, ...])

where:

• type is the MIME type to which you want to save or export your canvas. Possible values are:
  • "image\png" (Default value)
  • "image\jpeg"
• ... represents additional arguments that depend on the MIME type.
  • If type is png, this argument is " "
  • If type is jpeg, this argument is the desired quality level of the image. The value is a number in the range 0.0 to 1.0, inclusive.

 context.drawImage(image, dx, dy, dw, dh)

 context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

 var graphic = new Image();
 graphic.src = "clipart/graphic.png";

 graphic.onload = function(){
     context.drawImage(graphic,x,y);
 };

     context.createPattern(image, repetition);

     var roses = new Image();
     roses.src = "clipart/roses.jpg";

     roses.onload = function(){
         var pattern = context.createPattern(roses,repeat-x);
     };

 context.strokeStyle = "#FF0000"
 context.strokeStyle = "rgb(255,0,0)"

 context.fillStyle = "#0000FF"
 context.fillStyle = "rgb(0,0,255)"

 context.fillStyle = rgba(0, 0, 255, 0)        // transparent
 context.fillStyle = rgba(0, 0, 255, 0.5)    // semi-transparent
 context.fillStyle = rgba(0, 0, 255, 1)        // opaque

     createLinearGradient(x0, y0, x1, y1)

     createRadialGradient(x0, y0, r0, x1, y1, r1)

     addColorStop(position,color)

     var context        = canvas.getContext("2d");
     context.shadowOffsetX    = 5;
     context.shadowOffsetY    = 5;
     context.shadowBlur    = 10;
     context.shadowColor    = "rgba(0,0,0,0.5)";
     context.fillStyle    = "#0000FF";
     context.fillRect    = (0,0,100,50)

     context.translate(x,y);

     context.rotate(angle);

     var radians = (Math.PI/180)*degrees;

     context.scale(x,y);

 context.save();

 canvas.clearRect(x,y,width,height);

 var id = setInterval(functionName, 50);
 clearInterval(id);