HTML Canvas 学习笔记

﹏ヽ暗。殇╰゛Y 2022-09-02 14:44 223阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
   <th>&nbsp;</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Colors, Styles, and Shadows Property</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">fillStyle</a></td> 
   <td><a rel="nofollow">strokeStyle</a></td> 
   <td><a rel="nofollow">shadowColor</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">shadowBlur</a></td> 
   <td><a rel="nofollow">shadowOffsetX</a></td> 
   <td><a rel="nofollow">shadowOffsetY</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Colors, Styles, and Shadows Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">createLinearGradient()</a></td> 
   <td><a rel="nofollow">createPattern()</a></td> 
   <td><a rel="nofollow">createRadialGradient()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">addColorStop()</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Line Styles Property</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">lineCap</a></td> 
   <td><a rel="nofollow">lineJoin</a></td> 
   <td><a rel="nofollow">lineWidth</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">miterLimit</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Rectangles Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">rect()</a></td> 
   <td><a rel="nofollow">fillRect()</a></td> 
   <td><a rel="nofollow">strokeRect()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">clearRect()</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Paths Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">fill()</a></td> 
   <td><a rel="nofollow">stroke()</a></td> 
   <td><a rel="nofollow">beginPath()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">moveTo()</a></td> 
   <td><a rel="nofollow">closePath()</a></td> 
   <td><a rel="nofollow">lineTo()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">clip()</a></td> 
   <td><a rel="nofollow">quadraticCurveTo()</a></td> 
   <td><a rel="nofollow">bezierCurveTo()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">arc()</a></td> 
   <td><a rel="nofollow">arcTo()</a></td> 
   <td><a rel="nofollow">isPointInPath()</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Transformations Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">scale()</a></td> 
   <td><a rel="nofollow">rotate()</a></td> 
   <td><a rel="nofollow">translate()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">transform()</a></td> 
   <td><a rel="nofollow">setTransform()</a></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Text Property</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">font</a></td> 
   <td><a rel="nofollow">textAlign</a></td> 
   <td><a rel="nofollow">textBaseline</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Text Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">fillText()</a></td> 
   <td><a rel="nofollow">strokeText()</a></td> 
   <td><a rel="nofollow">measureText()</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Image Drawing Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">drawImage()</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Pixel Manipulation Property</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">width</a></td> 
   <td><a rel="nofollow">height</a></td> 
   <td><a rel="nofollow">data</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Pixel Manipulation Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">createImageData()</a></td> 
   <td><a rel="nofollow">getImageData()</a></td> 
   <td><a rel="nofollow">putImageData()</a></td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Compositing Property</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">globalAlpha</a></td> 
   <td><a rel="nofollow">globalCompositeOperation</a></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td><strong><a rel="nofollow">Other Method</a></strong></td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">save()</a></td> 
   <td><a rel="nofollow">restore()</a></td> 
   <td><a rel="nofollow">getContext()</a></td> 
  </tr> 
  <tr> 
   <td><a rel="nofollow">toDataURL()</a></td> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## Reference ##

*  [Link 1][]
 *  [Link 2][]

## Description ##

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).

However, the <canvas> element has no drawing abilities of its own (it is only a container for graphics) - you must use a script to actually draw the graphics.

The getContext() method returns an object that provides methods and properties for drawing on the canvas.

This reference will cover the properties and methods of the getContext(“2d”) object, which can be used to draw text, lines, boxes, circles, and more - on the canvas.

## Browser Support ##

Internet Explorer 9, Firefox, Opera, Chrome, and Safari support <canvas> and its properties and methods.

**Note:** Internet Explorer 8 and earlier versions, do not support the <canvas> element.

## Colors, Styles, and Shadows ##

<table> 
 <thead> 
  <tr> 
   <th>Property</th> 
   <th>Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fillStyle</td> 
   <td>Sets or returns the color, gradient, or pattern used to fill the drawing</td> 
  </tr> 
  <tr> 
   <td>strokeStyle</td> 
   <td>Sets or returns the color, gradient, or pattern used for strokes</td> 
  </tr> 
  <tr> 
   <td>shadowColor</td> 
   <td>Sets or returns the color to use for shadows</td> 
  </tr> 
  <tr> 
   <td>shadowBlur</td> 
   <td>Sets or returns the blur level for shadows</td> 
  </tr> 
  <tr> 
   <td>shadowOffsetX</td> 
   <td>Sets or returns the horizontal distance of the shadow from the shape</td> 
  </tr> 
  <tr> 
   <td>shadowOffsetY</td> 
   <td>Sets or returns the vertical distance of the shadow from the shape</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">createLinearGradient()</td> 
   <td align="left">Creates a linear gradient (to use on canvas content)</td> 
  </tr> 
  <tr> 
   <td align="left">createPattern()</td> 
   <td align="left">Repeats a specified element in the specified direction</td> 
  </tr> 
  <tr> 
   <td align="left">createRadialGradient()</td> 
   <td align="left">Creates a radial/circular gradient (to use on canvas content)</td> 
  </tr> 
  <tr> 
   <td align="left">addColorStop()</td> 
   <td align="left">Specifies the colors and stop positions in a gradient object</td> 
  </tr> 
 </tbody> 
</table>

### Property ###

#### fillStyle ####

Sets or returns the color, gradient, or pattern used to fill the drawing

> gradient  
> 英 \[ˈɡreɪdiənt\] 美 \[ˈɡreɪdiənt\]  
> n. (尤指公路或铁路的)坡度，斜率，倾斜度; (温度、压力等的)变化率，梯度变化曲线

##### Definition and Usage #####

The fillStyle property sets or returns the color, gradient, or pattern used to fill the drawing.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>#000000</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.fillStyle=color|gradient|pattern;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">A CSS color value that indicates the fill color of the drawing. Default value is #000000</td> 
  </tr> 
  <tr> 
   <td align="left">gradient</td> 
   <td align="left">A gradient object (linear or radial) used to fill the drawing</td> 
  </tr> 
  <tr> 
   <td align="left">pattern</td> 
   <td align="left">A pattern object to use to fill the drawing</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Define a red fill-color for the rectangle ######

![797a349b57d08f81b79716137b68c13b.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(20,20,150,100);

###### 2 Define a gradient (top to bottom) as the fill style for the rectangle ######

![855260508fb2f57b022b10dba8f6b5c5.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,0,170);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);

###### 3 Define a gradient (left to right) as the fill style for the rectangle ######

![ab201653f7fb5b9d5c66e3163c6c14cb.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);

###### 4 Define a gradient that goes from black, to red, to white, as the fill style for the rectangle ######

![d843f4af3f771828eb2f8c6d77532b48.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var my_gradient=ctx.createLinearGradient(0,0,170,0);
    my_gradient.addColorStop(0,"black");
    my_gradient.addColorStop(0.5,"red");
    my_gradient.addColorStop(1,"white");
    ctx.fillStyle=my_gradient;
    ctx.fillRect(20,20,150,100);

###### 5 Use an image to fill the drawing ######

![45a7c91ac8510ce94066cdc21862e7c5.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("lamp");
    var pat=ctx.createPattern(img,"repeat");
    ctx.rect(0,0,150,100);
    ctx.fillStyle=pat;
    ctx.fill();

#### strokeStyle ####

Sets or returns the color, gradient, or pattern used for strokes

> stroke  
> 英 \[strəʊk\] 美 \[stroʊk\]  
> n. (打、击等的)一下;击球(动作);一击;划水动作;划桨动作  
> vt. 轻抚(动物的毛皮);抚摩(物体表面或头发等);轻挪;轻触;轻拭

##### Definition and Usage #####

The strokeStyle property sets or returns the color, gradient, or pattern used for strokes.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>#000000</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.strokeStyle=color|gradient|pattern;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">A CSS color value that indicates the stroke color of the drawing. Default value is #000000</td> 
  </tr> 
  <tr> 
   <td align="left">gradient</td> 
   <td align="left">A gradient object (linear or radial) used to create a gradient stroke</td> 
  </tr> 
  <tr> 
   <td align="left">pattern</td> 
   <td align="left">A pattern object used to create a pattern stroke</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Use a stroke color of red to draw a rectangle. ######

![1860b07b81e7ba445bcc4c54d6ab0fd6.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeStyle="#FF0000";
    ctx.strokeRect(20,20,150,100);

###### 2 Use a gradient stroke to draw a rectangle. ######

![c3cc089805318b005826845b86bda4ca.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var gradient=ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    
    // Fill with gradient
    ctx.strokeStyle=gradient;
    ctx.lineWidth=5;
    ctx.strokeRect(20,20,150,100);

###### 3 Write the text “Big smile!” with a gradient stroke ######

![b309b7ba89430eb938e39976c34d59c3.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.strokeStyle=gradient;
    ctx.strokeText("Big smile!",10,50);

#### shadowColor ####

Sets or returns the color to use for shadows

##### Definition and Usage #####

The shadowColor property sets or returns the color to use for shadows.

**Note:** Use the shadowColor property together with the shadowBlur property to create a shadow.

**Tip:** Adjust the shadow by using the shadowOffsetX and shadowOffsetY properties.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>#000000</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.shadowColor=color;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">The CSS color value to use for shadows. Default value is #000000</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a red rectangle with a black shadow ######

![89bc2f091419fe4622503d7cb8f958df.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=20;
    ctx.shadowColor="black";
    ctx.fillStyle="red";
    ctx.fillRect(20,20,100,80);

#### shadowBlur ####

Sets or returns the blur level for shadows

##### Definition and Usage #####

The shadowBlur property sets or returns the blur level for shadows.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>0</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.shadowBlur=number;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">The blur level for the shadow</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a red rectangle with a black shadow, with blur level of 20 ######

![89bc2f091419fe4622503d7cb8f958df.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=20;
    ctx.shadowColor="black";
    ctx.fillStyle="red";
    ctx.fillRect(20,20,100,80);

#### shadowOffsetX ####

Sets or returns the horizontal distance of the shadow from the shape

##### Definition and Usage #####

The shadowOffsetX property sets or returns the horizontal distance of the shadow from the shape.

*  shadowOffsetX=0 indicates that the shadow is right behind the shape.
 *  shadowOffsetX=20 indicates that the shadow starts 20 pixels to the right (from the shape’s left position).
 *  shadowOffsetX=-20 indicates that the shadow starts 20 pixels to the left (from the shape’s left position).

**Tip:** To adjust the vertical distance of the shadow from the shape, use the shadowOffsetY property.

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">A positive or negative number that defines the horizontal distance of the shadow from the shape</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle with a shadow placed 20/100 pixels to the right (from the rectangle’s left position) ######

![7c648ec3bd25064fb7ce186c5b5bd1eb.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=10;
    ctx.shadowOffsetX=20;
    ctx.shadowColor="black";
    ctx.fillStyle="red";
    ctx.fillRect(20,20,100,80);

![871a8cf7240ac8678b23dc21c4314346.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 100;
    ctx.shadowColor = "black";
    ctx.fillStyle= "red";
    ctx.fillRect(20, 20, 100, 80);

#### shadowOffsetY ####

Sets or returns the vertical distance of the shadow from the shape

##### Definition and Usage #####

The shadowOffsetY property sets or returns the vertical distance of the shadow from the shape.

*  shadowOffsety=0 indicates that the shadow is right behind the shape.
 *  shadowOffsetY=20 indicates that the shadow starts 20 pixels below the shape’s top position.
 *  shadowOffsetY=-20 indicates that the shadow starts 20 pixels above the shape’s top position.

**Tip:** To adjust the horizontal distance of the shadow from the shape, use the shadowOffsetX property.

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">A positive or negative number that defines the vertical distance of the shadow from the shape</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle with a shadow placed 20 pixels below the rectangle’s top position ######

![2fbe17d971893f44602dbd82bfd41e8e.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.shadowBlur=10;
    ctx.shadowOffsetY=20;
    ctx.shadowColor="black";
    ctx.fillStyle="red";
    ctx.fillRect(20,20,100,80);

### Method ###

#### createLinearGradient() ####

##### Definition and Usage #####

The createLinearGradient() method creates a linear gradient object.

The gradient can be used to fill rectangles, circles, lines, text, etc.

**Tip:** Use this object as the value to the strokeStyle or fillStyle properties.

**Tip:** Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.createLinearGradient(x0,y0,x1,y1);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x0</td> 
   <td align="left">The x-coordinate of the start point of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">y0</td> 
   <td align="left">The y-coordinate of the start point of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">x1</td> 
   <td align="left">The x-coordinate of the end point of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">y1</td> 
   <td align="left">The y-coordinate of the end point of the gradient</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

查阅前文的fillStyle的Example 2、3、4，strokeStyle的Example 2。

#### createPattern() ####

##### Definition and Usage #####

The createPattern() method repeats the specified element in the specified direction.

The element can be an image, video, or another <canvas> element.

The repeated element can be used to draw/fill rectangles, circles, lines etc.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.createPattern(image,“repeat|repeat-x|repeat-y|no-repeat”);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">image</td> 
   <td align="left">Specifies the image, canvas, or video element of the pattern to use</td> 
  </tr> 
  <tr> 
   <td align="left">repeat</td> 
   <td align="left">Default. The pattern repeats both horizontally and vertically</td> 
  </tr> 
  <tr> 
   <td align="left">repeat-x</td> 
   <td align="left">The pattern repeats only horizontally</td> 
  </tr> 
  <tr> 
   <td align="left">repeat-y</td> 
   <td align="left">The pattern repeats only vertically</td> 
  </tr> 
  <tr> 
   <td align="left">no-repeat</td> 
   <td align="left">The pattern will be displayed only once (no repeat)</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

查阅前文的fillStyle的Example 5

当参数为repeat：

![dd5e2b2e0f5f6d2ac956265ea1e2f376.png][]

当参数为repeat-x：

![097123a5ab41ce258309b84a3e4d9c23.png][]

当参数为repeat-y：

![b0dec48cb83dc6a57bf5289a9251bfc8.png][]

当参数为no-repeat：

![c9cf1d06f0fcf99b67bdb16eddff3939.png][]

#### createRadialGradient() ####

##### Definition and Usage #####

The createRadialGradient() method creates a radial/circular gradient object.

The gradient can be used to fill rectangles, circles, lines, text, etc.

**Tip:** Use this object as the value to the strokeStyle or fillStyle properties.

**Tip:** Use the addColorStop() method to specify different colors, and where to position the colors in the gradient object.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.createRadialGradient(x0,y0,r0,x1,y1,r1);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x0</td> 
   <td align="left">The x-coordinate of the starting circle of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">y0</td> 
   <td align="left">The y-coordinate of the starting circle of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">r0</td> 
   <td align="left">The radius of the starting circle</td> 
  </tr> 
  <tr> 
   <td align="left">x1</td> 
   <td align="left">The x-coordinate of the ending circle of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">y1</td> 
   <td align="left">The y-coordinate of the ending circle of the gradient</td> 
  </tr> 
  <tr> 
   <td align="left">r1</td> 
   <td align="left">The radius of the ending circle</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle and fill with a radial/circular gradient: ######

![812093d54c9bb313ffc5bcf6d427149e.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var grd=ctx.createRadialGradient(75,50,5,90,60,100);
    grd.addColorStop(0,"red");
    grd.addColorStop(1,"white");
    
    // Fill with gradient
    ctx.fillStyle=grd;
    ctx.fillRect(10,10,150,100);

#### addColorStop() ####

##### Definition and Usage #####

The addColorStop() method specifies the colors and position in a gradient object.

The addColorStop() method is used together with createLinearGradient() or createRadialGradient().

**Note:** You can call the addColorStop() method multiple times to change a gradient. If you omit this method for gradient objects, the gradient will not be visible. You need to create at least one color stop to have a visible gradient.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>gradient.addColorStop(stop,color);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">stop</td> 
   <td align="left">A value between 0.0 and 1.0 that represents the position between start and end in a gradient</td> 
  </tr> 
  <tr> 
   <td align="left">color</td> 
   <td align="left">A CSS color value to display at the stop position</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Define a gradient with multiple addColorStop() methods ######

![25279418ea7cd0840d63c3f8b2e4c74a.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var grd=ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"black");
    grd.addColorStop(0.3,"magenta");
    grd.addColorStop(0.5,"blue");
    grd.addColorStop(0.6,"green");
    grd.addColorStop(0.8,"yellow");
    grd.addColorStop(1,"red");
    
    ctx.fillStyle=grd;
    ctx.fillRect(20,20,150,100);

## Line Styles ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Property</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">lineCap</td> 
   <td align="left">Sets or returns the style of the end caps for a line</td> 
  </tr> 
  <tr> 
   <td align="left">lineJoin</td> 
   <td align="left">Sets or returns the type of corner created, when two lines meet</td> 
  </tr> 
  <tr> 
   <td align="left">lineWidth</td> 
   <td align="left">Sets or returns the current line width</td> 
  </tr> 
  <tr> 
   <td align="left">miterLimit</td> 
   <td align="left">Sets or returns the maximum miter length</td> 
  </tr> 
 </tbody> 
</table>

### Property ###

#### lineCap ####

Sets or returns the style of the end caps for a line

##### Definition and Usage #####

The lineCap property sets or returns the style of the end caps for a line.

**Note:** The value “round” and “square” make the lines slightly longer.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>butt</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.lineCap=“butt|round|square”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">butt</td> 
   <td align="left">Default. A flat edge is added to each end of the line</td> 
  </tr> 
  <tr> 
   <td align="left">round</td> 
   <td align="left">A rounded end cap is added to each end of the line</td> 
  </tr> 
  <tr> 
   <td align="left">square</td> 
   <td align="left">A square end cap is added to each end of the line</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a line with end caps ######

![e5714fd6a40882f16d7bbb0e4067dce5.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.lineCap = "butt";
    ctx.moveTo(20, 20);
    ctx.lineTo(200, 20);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.moveTo(20, 40);
    ctx.lineTo(200, 40);
    ctx.stroke();
    
    ctx.beginPath();
    ctx.lineCap = "square";
    ctx.moveTo(20, 60);
    ctx.lineTo(200, 60);
    ctx.stroke();

#### lineJoin ####

Sets or returns the type of corner created, when two lines meet

##### Definition and Usage #####

The lineJoin property sets or returns the type of corner created, when two lines meet.

**Note:** The “miter” value is affected by the miterLimit property.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>miter</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.lineJoin=“bevel|round|miter”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">bevel</td> 
   <td align="left">Creates a beveled corner</td> 
  </tr> 
  <tr> 
   <td align="left">round</td> 
   <td align="left">Creates a rounded corner</td> 
  </tr> 
  <tr> 
   <td align="left">miter</td> 
   <td align="left">Default. Creates a sharp corner</td> 
  </tr> 
 </tbody> 
</table>

> bevel  
> 英 \[ˈbevl\] 美 \[ˈbevl\]  
> n. 斜边;斜面;斜角规  
> v. 把（物体的方形边）改成斜面边

> miter  
> 英 \[ˈmaɪtə®\] 美 \[ˈmaɪtər\]  
> n. 主教法冠；斜接  
> v. 给主教等加冠；使斜接

##### Example #####

###### 1 Create a different corner when the two lines meet ######

![1679f31faccb84015b731882a8af9e37.png][]

var c = document.getElementById("myCanvas");
    
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.lineJoin = "round";//<---------------
    ctx.moveTo(20, 20);
    ctx.lineTo(100, 50);
    ctx.lineTo(20, 100);
    ctx.stroke();
    
    ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.lineJoin = "miter";//<--------------- Default. Creates a sharp corner
    ctx.moveTo(20, 150);
    ctx.lineTo(100, 180);
    ctx.lineTo(20, 230);
    ctx.stroke();
    
    
    ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.lineJoin = "bevel";//<--------------- 类似条形纸条斜折效果
    ctx.moveTo(20, 280);
    ctx.lineTo(100, 310);
    ctx.lineTo(20, 360);
    ctx.stroke();

#### lineWidth ####

Sets or returns the current line width

##### Definition and Usage #####

The lineWidth property sets or returns the current line width, in pixels.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.lineWidth=number;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">The current line width, in pixels</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

参考上文lineJoin的例子

#### miterLimit ####

Sets or returns the maximum miter length

##### Definition and Usage #####

The miterLimit property sets or returns the maximum miter length.

The miter length is the distance between the inner corner and the outer corner where two lines meet.

![Miter Limit figure 1][]

**Tip:** The miterLimit property works **only if the lineJoin attribute is “miter”**.

The miter length grows bigger as the angle of the corner gets smaller.

To prevent the miter length from being *too* long, we can use the miterLimit property.

**If the miter length exceeds the miterLimit value, the corner will be displayed as lineJoin type “bevel”** （类似条形纸条斜折效果）(Fig 3):

![Miter Limit figure 2][]

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.miterLimit=number;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">A positive number that specifies the maximum miter length. If the current miter length exceeds the miterLimit, the corner will display as lineJoin “bevel”</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw lines with the maximum miter length of 5 ######

![69a7d31cd689decd28b7a3d3e447369c.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineJoin = "miter";
    ctx.miterLimit = 5;
    ctx.moveTo(20, 20);
    ctx.lineTo(50, 27);
    ctx.lineTo(20, 34);
    ctx.stroke();
    
    /* set the miterLimit to 4 (then, the miter length will exceed the miter limit), and when the lines meet it will be displayed as lineJoin="bevel". */
    
    ctx = c.getContext("2d");
    ctx.lineWidth = 10;
    ctx.lineJoin = "miter";
    ctx.miterLimit = 4;
    ctx.moveTo(20, 50);
    ctx.lineTo(50, 57);
    ctx.lineTo(20, 64);
    ctx.stroke();

## Rectangles ##

### Method ###

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">rect()</td> 
   <td align="left">Creates a rectangle</td> 
  </tr> 
  <tr> 
   <td align="left">fillRect()</td> 
   <td align="left">Draws a “filled” rectangle</td> 
  </tr> 
  <tr> 
   <td align="left">strokeRect()</td> 
   <td align="left">Draws a rectangle (no fill)</td> 
  </tr> 
  <tr> 
   <td align="left">clearRect()</td> 
   <td align="left">Clears the specified pixels within a given rectangle</td> 
  </tr> 
 </tbody> 
</table>

#### rect() ####

Creates a rectangle

##### Definition and Usage #####

The rect() method creates a rectangle.

**Tip:** Use the stroke()or the fill() method to actually draw the rectangle on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.rect(x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Create three rectangles with the rect() method ######

![4a69804530bd7bd85733b8b09e61075b.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    // Red rectangle
    ctx.beginPath();
    ctx.lineWidth="6";
    ctx.strokeStyle="red";
    ctx.rect(5,5,290,140);
    ctx.stroke();
    
    // Green rectangle
    ctx.beginPath();
    ctx.lineWidth="4";
    ctx.strokeStyle="green";
    ctx.rect(30,30,50,50);
    ctx.stroke();
    
    // Blue rectangle
    ctx.beginPath();
    ctx.lineWidth="10";
    ctx.strokeStyle="blue";
    ctx.rect(50,50,150,80);
    ctx.stroke();

#### fillRect() ####

Draws a “filled” rectangle

##### Definition and Usage #####

The fillRect() method draws a “filled” rectangle. The default color of the fill is black.

**Tip:** Use the fillStyle property to set a color, gradient, or pattern used to fill the drawing.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td><em>context</em>.fillRect(x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Draw a filled 150\*100 pixels rectangle ######

![accce9c455392c9b9678edb14010a924.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(20,20,150,100);

#### strokeRect() ####

Draws a rectangle (no fill)

##### Definition and Usage #####

The strokeRect() method draws a rectangle (no fill). The default color of the stroke is black.

**Tip:** Use the strokeStyle property to set a color, gradient, or pattern to style the stroke.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.streRect(x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Draw a 150\*100 pixels rectangle ######

![d2434167bc0a7f8f190ef67009af09dd.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeRect(20,20,150,100);

#### clearRect() ####

Clears the specified pixels within a given rectangle

##### Definition and Usage #####

The clearRect() method clears the specified pixels within a given rectangle.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.clearRect(x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Clear a rectangle within a given rectangle ######

![855949fbd84c2a0188c711b44e39ce16.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(0,0,300,150);
    ctx.clearRect(20,20,100,50);

## Paths ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">fill()</td> 
   <td align="left">Fills the current drawing (path)</td> 
  </tr> 
  <tr> 
   <td align="left">stroke()</td> 
   <td align="left">Actually draws the path you have defined</td> 
  </tr> 
  <tr> 
   <td align="left">beginPath()</td> 
   <td align="left">Begins a path, or resets the current path</td> 
  </tr> 
  <tr> 
   <td align="left">moveTo()</td> 
   <td align="left">Moves the path to the specified point in the canvas, without creating a line</td> 
  </tr> 
  <tr> 
   <td align="left">closePath()</td> 
   <td align="left">Creates a path from the current point back to the starting point</td> 
  </tr> 
  <tr> 
   <td align="left">lineTo()</td> 
   <td align="left">Adds a new point and creates a line to that point from the last specified point in the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">clip()</td> 
   <td align="left">Clips a region of any shape and size from the original canvas</td> 
  </tr> 
  <tr> 
   <td align="left">quadraticCurveTo()</td> 
   <td align="left">Creates a quadratic Bézier curve</td> 
  </tr> 
  <tr> 
   <td align="left">bezierCurveTo()</td> 
   <td align="left">Creates a cubic Bézier curve</td> 
  </tr> 
  <tr> 
   <td align="left">arc()</td> 
   <td align="left">Creates an arc/curve (used to create circles, or parts of circles)</td> 
  </tr> 
  <tr> 
   <td align="left">arcTo()</td> 
   <td align="left">Creates an arc/curve between two tangents</td> 
  </tr> 
  <tr> 
   <td align="left">isPointInPath()</td> 
   <td align="left">Returns true if the specified point is in the current path, otherwise false</td> 
  </tr> 
 </tbody> 
</table>

### Method ###

#### fill() ####

Fills the current drawing (path)

##### Definition and Usage #####

The fill() method fills the current drawing (path). The default color is black.

**Tip:** Use the fillStyle property to fill with another color/gradient.

**Note:** If the path is not closed, the fill() method will add a line from the last point to the startpoint of the path to close the path (like closePath()), and then fill the path.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.fill();</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw two 150\*100 pixels rectangles. Fill one with a red color and the other with a blue color ######

![231e4abaa664c13e01220e4dc3d11bf8.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.beginPath();
    ctx.rect(20, 20, 150, 100);
    ctx.fillStyle = "red";
    ctx.fill();
    
    ctx.beginPath();
    ctx.rect(40, 40, 150, 100);
    ctx.fillStyle = "blue";
    ctx.fill();

#### stroke() ####

Actually draws the path you have defined

> stroke
> 
> 英 \[strəʊk\] 美 \[stroʊk\]
> 
> n. (打、击等的)一下;击球(动作);一击;划水动作;划桨动作;中风
> 
> vt. 轻抚(动物的毛皮);抚摩(物体表面或头发等);轻挪;轻触;轻拭

##### Definition and Usage #####

The stroke() method actually draws the path you have defined with all those moveTo() and lineTo() methods. The default color is black.

**Tip:** Use the strokeStyle property to draw with another color/gradient.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.stroke();</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a path, shaped as the letter L - in a red color ######

![e788081d3d673d4367cbf4a27536231e.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.lineTo(20,100);
    ctx.lineTo(70,100);
    ctx.strokeStyle="red";
    ctx.stroke();

#### beginPath() ####

Begins a path, or resets the current path

##### Definition and Usage #####

The beginPath() method begins a path, or resets the current path.

**Tip:** Use moveTo(), lineTo(), quadricCurveTo(), bezierCurveTo(), arcTo(), and arc(), to create paths.

**Tip:** Use the stroke() method to actually draw the path on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.beginPath();</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw two paths on the canvas; one green and one purple ######

![d3c43aebc03de88929da97958b1a0d73.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath();
    ctx.lineWidth="5";
    ctx.strokeStyle="green"; // Green path
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // Draw it
    
    ctx.beginPath();
    ctx.strokeStyle="purple"; // Purple path
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // Draw it

#### moveTo() ####

Moves the path to the specified point in the canvas, without creating a line

##### Definition and Usage #####

The moveTo() method moves the path to the specified point in the canvas, without creating a line.

**Tip:** Use the stroke() method to actually draw the path on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.moveTo(x,y);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Begin a path, move to position 0,0. Create a line to position 300,150 ######

![6e15f1fb16e449845f070a97b8072425.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();

#### closePath() ####

Creates a path from the current point back to the starting point

##### Definition and Usage #####

The closePath() method creates a path from the current point back to the starting point.

**Tip:** Use the stroke() method to actually draw the path on the canvas.

**Tip:** Use the fill() method to fill the drawing (black is default). Use the fillStyle property to fill with another color/gradient.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.closePath();</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a path, shaped as the letter L, and then draw a line back to the starting point ######

![d468477ce1500704728abf547ab4c51b.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20, 20);
    ctx.lineTo(20, 100);
    ctx.lineTo(70, 100);
    ctx.closePath();
    ctx.stroke();
    
    ctx.beginPath();
    ctx.moveTo(20, 150);
    ctx.lineTo(20, 230);
    ctx.lineTo(70, 230);
    //ctx.closePath();//<----------注释掉ctx.closePath()
    ctx.stroke();

#### lineTo() ####

Adds a new point and creates a line to that point from the last specified point in the canvas

##### Definition and Usage #####

The lineTo() method adds a new point and creates a line TO that point FROM the last specified point in the canvas (this method does not draw the line).

**Tip:** Use the stroke() method to actually draw the path on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.lineTo(x,y);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

参考上文closePath()的Example。

#### clip() ####

Clips剪出 a region of any shape and size from the original canvas

> clip  
> 英 \[klɪp\] 美 \[klɪp\]  
> n. 夹子;修剪;(金属或塑料的)回形针;首饰别针;剪短  
> v. 夹住;别住;被夹住;**剪(掉)**;修剪;碰撞(某物的边缘或侧面)

##### Definition and Usage #####

The clip() method clips a region of any shape and size from the original canvas.

**Tip:** Once a region is clipped, all future drawing will be limited to the clipped region (no access to other regions on the canvas). You can however save the current canvas region using the save() method before using the clip() method, and restore it (with the restore() method) any time in the future.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.clip();</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Clip of a rectangular region of 200\*120 pixels from the canvas. Then, draw a red rectangle. Only the part of the red rectangle that is inside the clipped area is visible ######

![e431d39a98fe3c26d7d7a12a832f5d9d.png][]

<span>Without clip():</span>
    <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); // Draw a rectangle ctx.rect(50, 20, 200, 120); ctx.stroke(); // Draw red rectangle ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 100); </script> 
    
    <span>With clip():</span>
    <canvas id="myCanvas2" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script> var c = document.getElementById("myCanvas2"); var ctx = c.getContext("2d"); // Clip a rectangular area ctx.rect(50, 20, 200, 120); ctx.stroke(); ctx.clip(); // Draw red rectangle after clip() ctx.fillStyle = "red"; ctx.fillRect(0, 0, 150, 100); </script>

#### quadraticCurveTo() ####

Creates a quadratic Bézier curve

> quadratic  
> 英 \[kwɒˈdrætɪk\] 美 \[kwɑːˈdrætɪk\]  
> adj. 平方的;二次方的

> 贝塞尔曲线（Bézier curve），又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线，贝兹曲线由线段与节点组成，节点是可拖动的支点，线段像可伸缩的皮筋，我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重要的参数曲线，在一些比较成熟的位图软件中也有贝塞尔曲线工具，如PhotoShop等。[百度百科][Link 1 1]

##### Definition and Usage #####

The quadraticCurveTo() method adds a point to the current path by using the specified control points that represent a quadratic Bézier curve.

A quadratic Bézier curve requires two points. The first point is a control point that is used in the quadratic Bézier calculation and the second point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() to define a starting point.

![A quadratic Bézier curve][A quadratic B_zier curve]

*  Start point:
    
     *  moveTo(**20,20**)
 *  Control point:
    
     *  quadraticCurveTo(**20,100**,200,20)
 *  End point:
    
     *  quadraticCurveTo(20,100,**200,20**)

**Tip:** Check out the bezierCurveTo() method. It has two control-points instead of one.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.quadraticCurveTo(cpx,cpy,x,y);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">cpx</td> 
   <td align="left">The x-coordinate of the Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">cpy</td> 
   <td align="left">The y-coordinate of the Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x-coordinate of the ending point</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y-coordinate of the ending point</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a quadratic Bézier curve ######

![9e4b98cf9cd8ce4a3cf10458a2993d47.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.quadraticCurveTo(20,100,200,20);
    ctx.stroke();

#### bezierCurveTo() ####

Creates a cubic Bézier curve

> cubic  
> 英 \[ˈkjuːbɪk\] 美 \[ˈkjuːbɪk\]  
> adj. 立方体的;立方的;用立方单位度量(或表示)的;立方形的

##### Definition and Usage #####

The bezierCurveTo() method adds a point to the current path by using the specified control points that represent a cubic Bézier curve.

A cubic bezier curve requires three points. The first two points are control points that are used in the cubic Bézier calculation and the last point is the ending point for the curve. The starting point for the curve is the last point in the current path. If a path does not exist, use the beginPath() and moveTo() methods to define a starting point.

![A cubic bezier curve][]

*  Start point
    
     *  moveTo(**20,20**)
 *  Control point 1
    
     *  bezierCurveTo(**20,100**,200,100,200,20)
 *  Control point 2
    
     *  bezierCurveTo(20,100,**200,100**,200,20)
 *  End point
    
     *  bezierCurveTo(20,100,200,100,**200,20**)

**Tip:** Check out the quadraticCurveTo() method. It has one control point instead of two.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">cp1x</td> 
   <td align="left">The x-coordinate of the first Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">cp1y</td> 
   <td align="left">The y-coordinate of the first Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">cp2x</td> 
   <td align="left">The x-coordinate of the second Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">cp2y</td> 
   <td align="left">The y-coordinate of the second Bézier control point</td> 
  </tr> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x-coordinate of the ending point</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y-coordinate of the ending point</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a cubic Bézier curve ######

![1366dd53b2589d388552e14c9ead1677.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(20,20);
    ctx.bezierCurveTo(20,100,200,100,200,20);
    ctx.stroke();

#### arc() ####

Creates an arc/curve (used to create circles, or parts of circles)

> arc  
> 英 \[ɑːk\] 美 \[ɑːrk\]  
> n. 弧;弧形;电弧  
> vi. 作弧形运动;形成电弧

> curve  
> 英 \[kɜːv\] 美 \[kɜːrv\]  
> n. 曲线;弧线;曲面;弯曲;(投向击球员的)曲线球  
> v. (使)沿曲线运动;呈曲线形

##### Definition and Usage #####

The arc() method creates an arc/curve (used to create circles, or parts of circles).

**Tip:** To create a circle with arc(): Set start angle to 0 and end angle to 2\*Math.PI.

**Tip:** Use the stroke() or the fill() method to actually draw the arc on the canvas.

![An arc][]

*  Center
    
     *  arc(**100,75**,50,0 \* Math.PI,1.5 \* Math.PI)
 *  Start angle
    
     *  arc(100,75,50,\*\*0 \* Math.PI \*\* ,1.5\*Math.PI)
 *  End angle
    
     *  arc(100,75,50,0 \* Math.PI,**1.5 \* Math.PI**)

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.arc(x,y,r,sAngle,eAngle,counterclockwise);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x-coordinate of the center of the circle</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y-coordinate of the center of the circle</td> 
  </tr> 
  <tr> 
   <td align="left">r</td> 
   <td align="left">The radius of the circle</td> 
  </tr> 
  <tr> 
   <td align="left">sAngle</td> 
   <td align="left">The starting angle, in radians (0 is at the 3 o’clock position of the arc’s circle)</td> 
  </tr> 
  <tr> 
   <td align="left">eAngle</td> 
   <td align="left">The ending angle, in radians</td> 
  </tr> 
  <tr> 
   <td align="left">counterclockwise</td> 
   <td align="left">Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise.</td> 
  </tr> 
 </tbody> 
</table>

> clockwise  
> 英 \[ˈklɒkwaɪz\] 美 \[ˈklɑːkwaɪz\]  
> adv./adj.顺时针方向的;顺时针方向(的)

> counterclockwise  
> 英 \[ˌkaʊntəˈklɒkwaɪz\] 美 \[ˌkaʊntərˈklɑːkwaɪz\]  
> adj. 反时针方向的；逆时针方向的  
> adv. 逆时针方向地;自右向左地

##### Example #####

###### 1 Create a circle ######

![7a89d89f10dd66ad2ffaff83dbb7a068.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.arc(100,75,50,0,2*Math.PI);
    ctx.stroke();

#### arcTo() ####

Creates an arc/curve between two tangents

> tangent  
> 英 \[ˈtændʒənt\] 美 \[ˈtændʒənt\]  
> n. 切线;正切

##### Definition and Usage #####

The arcTo() method creates an arc/curve between two tangents on the canvas.

![Canvas arcto() diagram][Canvas arcto_ diagram]

**Tip:** Use the stroke() method to actually draw the arc on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.arcTo(x1,y1,x2,y2,r);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x1</td> 
   <td align="left">The x-coordinate of the first tangent</td> 
  </tr> 
  <tr> 
   <td align="left">y1</td> 
   <td align="left">The y-coordinate of the first tangent</td> 
  </tr> 
  <tr> 
   <td align="left">x2</td> 
   <td align="left">The x-coordinate of the second tangent</td> 
  </tr> 
  <tr> 
   <td align="left">y2</td> 
   <td align="left">The y-coordinate of the second tangent</td> 
  </tr> 
  <tr> 
   <td align="left">r</td> 
   <td align="left">The radius of the arc</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Create an arc between two tangents on the canvas ######

![2045a92f4c0af65c0f8b41e6c8033f88.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.beginPath();     
    ctx.moveTo(20, 20);               // Create a starting point
    ctx.lineTo(100, 20);              // Create a horizontal line
    ctx.arcTo(150, 20, 150, 70, 50);  // Create an arc
    ctx.lineTo(150, 120);             // Continue with vertical line
    ctx.stroke();                     // Draw it

#### isPointInPath() ####

Returns true if the specified point is in the current path, otherwise false

##### Definition and Usage #####

The isPointInPath() method returns true if the specified point is in the current path, otherwise false.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.isPointInPath(x,y);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Draw a rectangle if the point 20,50 is in the current path ######

![c9d7cf0198bbfbf47be02aede7d3638a.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.rect(20, 20, 150, 100);
    if (ctx.isPointInPath(20, 50)) { 
    	ctx.stroke();
    };

## Transformations ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scale()</td> 
   <td align="left">Scales the current drawing bigger or smaller</td> 
  </tr> 
  <tr> 
   <td align="left">rotate()</td> 
   <td align="left">Rotates the current drawing</td> 
  </tr> 
  <tr> 
   <td align="left">translate()</td> 
   <td align="left">Remaps the (0,0) position on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">transform()</td> 
   <td align="left">Replaces the current transformation matrix for the drawing</td> 
  </tr> 
  <tr> 
   <td align="left">setTransform()</td> 
   <td align="left">Resets the current transform to the identity matrix. Then runs transform()</td> 
  </tr> 
 </tbody> 
</table>

### Method ###

#### scale() ####

Scales the current drawing bigger or smaller

> scale  
> 英 \[skeɪl\] 美 \[skeɪl\]  
> n. 规模;(尤指与其他事物相比较时的)范围;程度;等级;级别;等级体系  
> vt. 攀登;到达…顶点;去鳞;刮除牙石

##### Definition and Usage #####

The scale() method scales the current drawing, bigger or smaller.

**Note:** If you scale a drawing, all future drawings will also be scaled. The positioning will also be scaled. If you scale(2,2); drawings will be positioned twice as far from the left and top of the canvas as you specify.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.scale(scalewidth,scaleheight);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">scalewidth</td> 
   <td align="left">Scales the width of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)</td> 
  </tr> 
  <tr> 
   <td align="left">scaleheight</td> 
   <td align="left">Scales the height of the current drawing (1=100%, 0.5=50%, 2=200%, etc.)</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle, scale to 200%, draw rectangle again, scale to 200%, draw rectangle again, scale to 200%, draw rectangle again ######

![5defeae06fdeb8f0cad78602ac6e1b0e.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.strokeStyle="black";
    ctx.strokeRect(5, 5, 25, 15);
    
    ctx.strokeStyle="red";
    ctx.scale(2, 2);
    ctx.strokeRect(5, 5, 25, 15);
    
    ctx.strokeStyle="green";
    ctx.scale(2, 2);
    ctx.strokeRect(5, 5, 25, 15);
    
    ctx.strokeStyle="blue";
    ctx.scale(2, 2);
    ctx.strokeRect(5, 5, 25, 15);

#### rotate() ####

Rotates the current drawing

##### Definition and Usage #####

The rotate() method rotates the current drawing.

**Note:** The rotation will only affect drawings made AFTER the rotation is done.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.rotate(angle);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">angle</td> 
   <td align="left">The rotation angle, in radians. To calculate from degrees to radians: degrees * Math.PI/180. Example: to rotate 5 degrees, specify the following: 5 * Math.PI/180</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Rotate the rectangle 20 degrees ######

![6c0d9b3b825b3cb3ed8552a86cfe6e2c.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.rotate(20 * Math.PI / 180);
    ctx.fillRect(50, 20, 100, 50);

#### translate() ####

Remaps the (0,0) position on the canvas

##### Definition and Usage #####

The translate() method remaps the (0,0) position on the canvas.

**Note:** When you call a method such as fillRect() after translate(), the value is added to the x- and y-coordinate values.

![Illustration of the translate() method][Illustration of the translate_ method]

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td><em>context</em>.translate(<em>x,y</em>);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

**Note:** You can specify one or both parameters.

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The value to add to horizontal (x) coordinates</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The value to add to vertical (y) coordinates</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle in position (10,10), set new (0,0) position to (70,70). Draw same rectangle again (notice that the rectangle now starts in position (80,80) ######

![304c0b39e99ac13dc016ffb7127b31a3.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(10,10,100,50);
    ctx.translate(70,70);
    ctx.fillRect(10,10,100,50);

#### transform() ####

Replaces the current transformation matrix for the drawing

##### Definition and Usage #####

Each object on the canvas has a current transformation matrix.

The transform() method replaces the current transformation matrix. It multiplies the current transformation matrix with the matrix described by:

\[ a c e b d f 0 0 1 \] \\left\[ \\begin\{array\}\{ccc\} a & c & e \\\\ b & d & f \\\\ 0 & 0 & 1 \\end\{array\} \\right\] ⎣⎡ab0cd0ef1⎦⎤

**In other words, the transform() method lets you scale, rotate, move, and skew the current context.**

**Note:** The transformation will only affect drawings made after the transform() method is called.

**Note:** The transform() method behaves relatively to other transformations made by rotate(), scale(), translate(), or transform(). Example: If you already have set your drawing to scale by two, and the transform() method scales your drawings by two, your drawings will now scale by four.

**Tip:** Check out the setTransform() method, which does not behave relatively to other transformations.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.transform(a,b,c,d,e,f);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">a</td> 
   <td align="left">Scales the drawing horizontally</td> 
  </tr> 
  <tr> 
   <td align="left">b</td> 
   <td align="left">Skew the the drawing horizontally</td> 
  </tr> 
  <tr> 
   <td align="left">c</td> 
   <td align="left">Skew the the drawing vertically</td> 
  </tr> 
  <tr> 
   <td align="left">d</td> 
   <td align="left">Scales the drawing vertically</td> 
  </tr> 
  <tr> 
   <td align="left">e</td> 
   <td align="left">Moves the the drawing horizontally</td> 
  </tr> 
  <tr> 
   <td align="left">f</td> 
   <td align="left">Moves the the drawing vertically</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a rectangle, add a new transformation matrix with transform(), draw the rectangle again, add a new transformation matrix, then draw the rectangle again. ######

Notice that each time you call transform(), it builds on the previous transformation matrix

![155c262d38988889d77c0641e2577083.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    
    ctx.fillStyle = "yellow";
    ctx.fillRect(0, 0, 250, 100)
    
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "red";
    ctx.fillRect(0, 0, 250, 100);
    
    ctx.transform(1, 0.5, -0.5, 1, 30, 10);
    ctx.fillStyle = "blue";
    ctx.fillRect(0, 0, 250, 100);

#### setTransform() ####

Resets the current transform to the identity matrix. Then runs transform()

##### Definition and Usage #####

Each object on the canvas has a current transformation matrix.

The setTransform() method resets the current transform to the identity matrix, and then runs transform() with the same arguments.

In other words, the setTransform() method lets you scale, rotate, move, and skew the current context.

**Note:** The transformation will only affect drawings made after the setTransform method is called.

##### Parameter Values #####

##### Example #####

###### 1 Draw a rectangle, reset and create a new transformation matrix with setTransform(), draw the rectangle again, reset and create a new transformation matrix, then draw the rectangle again. ######

Notice that each time you call setTransform(), it resets the previous transformation matrix and then builds the new matrix, so in the example below, the red rectangle is not shown, because it is under the blue rectangle.

![b89e697954613414853fe2bf5548ebd5.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.fillStyle="yellow";
    ctx.fillRect(0,0,250,100)
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="red";
    ctx.fillRect(0,0,250,100);
    
    ctx.setTransform(1,0.5,-0.5,1,30,10);
    ctx.fillStyle="blue";
    ctx.fillRect(0,0,250,100);

PS.对比上文的transform()的Example对比理解。

## Text ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Property</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">font</td> 
   <td align="left">Sets or returns the current font properties for text content</td> 
  </tr> 
  <tr> 
   <td align="left">textAlign</td> 
   <td align="left">Sets or returns the current alignment for text content</td> 
  </tr> 
  <tr> 
   <td align="left">textBaseline</td> 
   <td align="left">Sets or returns the current text baseline used when drawing text</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">fillText()</td> 
   <td align="left">Draws “filled” text on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">strokeText()</td> 
   <td align="left">Draws text on the canvas (no fill)</td> 
  </tr> 
  <tr> 
   <td align="left">measureText()</td> 
   <td align="left">Returns an object that contains the width of the specified text</td> 
  </tr> 
 </tbody> 
</table>

### Property ###

#### font ####

Sets or returns the current font properties for text content

##### Definition and Usage #####

The font property sets or returns the current font properties for text content on the canvas.

The font property uses the same syntax as the CSS font property.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>10px sans-serif</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.font=“italic small-caps bold 12px arial”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Values</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">font-style</td> 
   <td align="left">Specifies the font style. Possible values: normal, italic, oblique</td> 
  </tr> 
  <tr> 
   <td align="left">font-variant</td> 
   <td align="left">Specifies the font variant. Possible values:normal, small-caps</td> 
  </tr> 
  <tr> 
   <td align="left">font-weight</td> 
   <td align="left">Specifies the font weight. Possible values:normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900</td> 
  </tr> 
  <tr> 
   <td align="left">font-size/line-height</td> 
   <td align="left">Specifies the font size and the line-height, in pixels</td> 
  </tr> 
  <tr> 
   <td align="left">font-family</td> 
   <td align="left">Specifies the font family</td> 
  </tr> 
  <tr> 
   <td align="left">caption</td> 
   <td align="left">Use the font captioned controls (like buttons, drop-downs, etc.)</td> 
  </tr> 
  <tr> 
   <td align="left">icon</td> 
   <td align="left">Use the font used to label icons</td> 
  </tr> 
  <tr> 
   <td align="left">menu</td> 
   <td align="left">Use the font used in menus (drop-down menus and menu lists)</td> 
  </tr> 
  <tr> 
   <td align="left">message-box</td> 
   <td align="left">Use the font used in dialog boxes</td> 
  </tr> 
  <tr> 
   <td align="left">small-caption</td> 
   <td align="left">Use the font used for labeling small controls</td> 
  </tr> 
  <tr> 
   <td align="left">status-bar</td> 
   <td align="left">Use the fonts used in window status bar</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Write a 30px high text on the canvas, using the font “Arial” ######

![0e9bf11006e4f0977557628ae9215804.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    ctx.fillText("Hello World",10,50);

#### textAlign ####

Sets or returns the current alignment for text content

> align  
> 英 \[əˈlaɪn\] 美 \[əˈlaɪn\]  
> v. 排列;校准;排整齐;(尤指)使成一条直线;使一致

##### Definition and Usage #####

The textAlign property sets or returns the current alignment for text content, according to the anchor point.

Normally, the text will **START** in the position specified, however, if you set textAlign=“right” and place the text in position 150, it means that the text should **END** **in** position 150.

**Tip:** Use the fillText() or the strokeText() method to actually draw and position the text on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left">Default value:</th> 
   <th>start</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.textAlign=“center|end|left|right|start”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Values</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">start</td> 
   <td align="left">Default. The text starts at the specified position</td> 
  </tr> 
  <tr> 
   <td align="left">end</td> 
   <td align="left">The text ends at the specified position</td> 
  </tr> 
  <tr> 
   <td align="left">center</td> 
   <td align="left">The center of the text is placed at the specified position</td> 
  </tr> 
  <tr> 
   <td align="left">left</td> 
   <td align="left">The text starts at the specified position</td> 
  </tr> 
  <tr> 
   <td align="left">right</td> 
   <td align="left">The text ends at the specified position</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Create a red line in position 150. Position 150 is the anchor point for all the text defined in the example below ######

Study the effect of each textAlign property value.

![34e8ff454d42a583e2b772a3ac93b8a6.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    // Create a red line in position 150
    ctx.strokeStyle="red";
    ctx.moveTo(150,20);
    ctx.lineTo(150,170);
    ctx.stroke();
    
    ctx.font="15px Arial";
    
    // Show the different textAlign values
    ctx.textAlign="start";
    ctx.fillText("textAlign=start",150,60);
    
    ctx.textAlign="end";
    ctx.fillText("textAlign=end",150,80);
    
    ctx.textAlign="left";
    ctx.fillText("textAlign=left",150,100);
    
    ctx.textAlign="center";
    ctx.fillText("textAlign=center",150,120);
    
    ctx.textAlign="right";
    ctx.fillText("textAlign=right",150,140);

#### textBaseline ####

Sets or returns the current text baseline used when drawing text

##### Definition and Usage #####

The textBaseline property sets or returns the current text baseline used when drawing text.

The illustration below demonstrates the various baselines supported by the textBaseline attribute:

![textBaseline illustration][]

**Note:** The fillText() and strokeText() methods will use the specified textBaseline value when positioning the text on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>alphabetic</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.textBaseline=“alphabetic|top|hanging|middle|ideographic|bottom”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Values</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">alphabetic</td> 
   <td align="left">Default. The text baseline is the normal alphabetic baseline</td> 
  </tr> 
  <tr> 
   <td align="left">top</td> 
   <td align="left">The text baseline is the top of the em square</td> 
  </tr> 
  <tr> 
   <td align="left">hanging</td> 
   <td align="left">The text baseline is the hanging baseline</td> 
  </tr> 
  <tr> 
   <td align="left">middle</td> 
   <td align="left">The text baseline is the middle of the em square</td> 
  </tr> 
  <tr> 
   <td align="left">ideographic</td> 
   <td align="left">The text baseline is the ideographic baseline</td> 
  </tr> 
  <tr> 
   <td align="left">bottom</td> 
   <td align="left">The text baseline is the bottom of the bounding box</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw a red line at y=100, then place each word at y=100 with different textBaseline values ######

![f6c46eb2898d1d1ce7bd0777f2e1b94b.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    //Draw a red line at y=100
    ctx.strokeStyle="red";
    ctx.moveTo(5,100);
    ctx.lineTo(395,100);
    ctx.stroke();
    
    ctx.font="20px Arial"
    
    //Place each word at y=100 with different textBaseline values
    ctx.textBaseline="top";
    ctx.fillText("Top",5,100);
    
    ctx.textBaseline="bottom";
    ctx.fillText("Bottom",50,100);
    
    ctx.textBaseline="middle";
    ctx.fillText("Middle",120,100);
    
    ctx.textBaseline="alphabetic";
    ctx.fillText("Alphabetic",190,100);
    
    ctx.textBaseline="hanging";
    ctx.fillText("Hanging",290,100);

### Method ###

#### fillText() ####

Draws “filled” text on the canvas

##### Definition and Usage #####

The fillText() method draws filled text on the canvas. The default color of the text is black.

**Tip:** Use the font property to specify font and font size, and use the fillStyle property to render the text in another color/gradient.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.fillText(text,x,y,maxWidth);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">text</td> 
   <td align="left">Specifies the text that will be written on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x coordinate where to start painting the text (relative to the canvas)</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y coordinate where to start painting the text (relative to the canvas)</td> 
  </tr> 
  <tr> 
   <td align="left">maxWidth</td> 
   <td align="left">Optional. The maximum allowed width of the text, in pixels</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Write “Hello world!” and “Big smile!” (with gradient) on the canvas, using fillText() ######

![19565d1538970634464980c709e0b85a.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.fillText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    
    // Fill with gradient
    ctx.fillStyle=gradient;
    ctx.fillText("Big smile!",10,90);

#### strokeText() ####

Draws text on the canvas (no fill)

##### Definition and Usage #####

The strokeText() method draws text (with no fill) on the canvas. The default color of the text is black.

**Tip:** Use the font property to specify font and font size, and use the strokeStyle property to render the text in another color/gradient.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.strokeText(text,x,y,maxWidth);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

##### Example #####

###### 1 Write “Hello world!” and “Big smile!” (with gradient) on the canvas, using strokeText() ######

![d36c6fedad0e327ab0c1bae21ebff2a4.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.font="20px Georgia";
    ctx.strokeText("Hello World!",10,50);
    
    ctx.font="30px Verdana";
    // Create gradient
    var gradient=ctx.createLinearGradient(0,0,c.width,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    // Fill with gradient
    ctx.strokeStyle=gradient;
    ctx.strokeText("Big smile!",10,90);

#### measureText() ####

Returns an object that contains the width of the specified text

##### Definition and Usage #####

The measureText() method returns an object that contains the width of the specified text, in pixels.

**Tip:** Use this method if you need to know the width of a text, before writing it on the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.measureText(text).width;</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left"><em>text</em></td> 
   <td align="left">The text to be measured</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Check the width of the text, before writing it on the canvas ######

![0b610adedec5644948cdaca7d42c8936.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.font="30px Arial";
    var txt="Hello World"
    ctx.fillText("width:" + ctx.measureText(txt).width,10,50)
    ctx.fillText(txt,10,100);

## Image Drawing ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">drawImage()</td> 
   <td align="left">Draws an image, canvas, or video onto the canvas</td> 
  </tr> 
 </tbody> 
</table>

### Method ###

#### drawImage() ####

Draws an image, canvas, or video onto the canvas

##### Definition and Usage #####

The drawImage() method draws an image, canvas, or video onto the canvas.

The drawImage() method can also draw parts of an image, and/or increase/reduce the image size.

**Note:** **You cannot call the drawImage() method before the image has loaded.** To ensure that the image has been loaded, you can call drawImage() from window.onload() or from document.getElementById(“*imageID*”).onload.

##### JavaScript Syntax #####

Position the image on the canvas:

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.drawImage(img,x,y);</td> 
  </tr> 
 </tbody> 
</table>

Position the image on the canvas, and specify width and height of the image:

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.drawImage(img,x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

Clip the image and position the clipped part on the canvas:

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">img</td> 
   <td align="left">Specifies the image, canvas, or video element to use</td> 
  </tr> 
  <tr> 
   <td align="left">sx</td> 
   <td align="left">Optional. The x coordinate where to start clipping</td> 
  </tr> 
  <tr> 
   <td align="left">sy</td> 
   <td align="left">Optional. The y coordinate where to start clipping</td> 
  </tr> 
  <tr> 
   <td align="left">swidth</td> 
   <td align="left">Optional. The width of the clipped image</td> 
  </tr> 
  <tr> 
   <td align="left">sheight</td> 
   <td align="left">Optional. The height of the clipped image</td> 
  </tr> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x coordinate where to place the image on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y coordinate where to place the image on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">Optional. The width of the image to use (stretch or reduce the image)</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">Optional. The height of the image to use (stretch or reduce the image)</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Draw the image onto the canvas ######

![8fc4f97b9ec1f89be0938b8c24752e1b.png][]

window.onload = function() { 
        var c=document.getElementById("myCanvas");
        var ctx=c.getContext("2d");
        var img=document.getElementById("scream");
        ctx.drawImage(img,10,10);
    };

###### 2 Position the image on the canvas, and specify width and height of the image ######

![a0c162521f87ca304bb6280ab9cd5a02.png][]

###### 3 Clip the image and position the clipped part on the canvas ######

![4d061212ba0e6996a936b9cb10b7bce8.png][]

window.onload = function() { 
      var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      var img=document.getElementById("scream");
      ctx.drawImage(img,90,130,50,60,10,10,50,60);
    };

###### 4 draws the current frame of the video every 20 millisecond ######

![b0b3a591c96aef02405d5b05723fe150.png][]

## Pixel Manipulation ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Property</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">Returns the width of an ImageData object</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">Returns the height of an ImageData object</td> 
  </tr> 
  <tr> 
   <td align="left">data</td> 
   <td align="left">Returns an object that contains image data of a specified ImageData object</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">createImageData()</td> 
   <td align="left">Creates a new, blank ImageData object</td> 
  </tr> 
  <tr> 
   <td align="left">getImageData()</td> 
   <td align="left">Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas</td> 
  </tr> 
  <tr> 
   <td align="left">putImageData()</td> 
   <td align="left">Puts the image data (from a specified ImageData object) back onto the canvas</td> 
  </tr> 
 </tbody> 
</table>

### Property ###

#### width ####

Returns the width of an ImageData object

##### Definition and Usage #####

The width property returns the width of an ImageData object, in pixels.

**Tip:** Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.

##### JavaScript Syntax #####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>imgData.width;</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

略

#### height ####

Returns the height of an ImageData object

##### Definition and Usage #####

The height property returns the height of an ImageData object, in pixels.

**Tip:** Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.

##### JavaScript Syntax #####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>imgData.height;</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

略

#### data ####

Returns an object that contains image data of a specified ImageData object

##### Definition and Usage #####

The data property returns an object that contains image data of the specified ImageData object.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:

*  R - The color red (from 0-255)
 *  G - The color green (from 0-255)
 *  B - The color blue (from 0-255)
 *  A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.

**Examples:**

The syntax for making the first pixel in the ImageData object red:

imgData=ctx.createImageData(100,100);
    
    imgData.data[0]=255;
    imgData.data[1]=0;
    imgData.data[2]=0;
    imgData.data[3]=255;

The syntax for making the second pixel in the ImageData object green:

imgData=ctx.createImageData(100,100);
    
    imgData.data[4]=0;
    imgData.data[5]=255;
    imgData.data[6]=0;
    imgData.data[7]=255;

**Tip:** Look at createImageData(), getImageData(), and putImageData() to learn more about the ImageData object.

##### JavaScript Syntax #####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>imageData.data;</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

略

### Method ###

#### createImageData() ####

Creates a new, blank ImageData object

##### Definition and Usage #####

The createImageData() method creates a new, blank ImageData object. The new object’s pixel values are transparent black by default.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:

*  R - The color red (from 0-255)
 *  G - The color green (from 0-255)
 *  B - The color blue (from 0-255)
 *  A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

So, transparent black indicates: (0,0,0,0).

The color/alpha information is held in an array, and since the array contains 4 pieces of information for every pixel, the array’s size is 4 times the size of the ImageData object: width*height*4. (An easier way to find the size of the array, is to use ImageDataObject.data.length)

The array containing the color/alpha information is stored in the data property of the ImageData object.

**Tip:** After you have manipulated the color/alpha information in the array, you can copy the image data back onto the canvas with the putImageData() method.

**Examples:**

The syntax for making the first pixel in the ImageData object red:

imgData=ctx.createImageData(100,100);
    
    imgData.data[0]=255;
    imgData.data[1]=0;
    imgData.data[2]=0;
    imgData.data[3]=255;

The syntax for making the second pixel in the ImageData object green:

imgData=ctx.createImageData(100,100);
    
    imgData.data[4]=0;
    imgData.data[5]=255;
    imgData.data[6]=0;
    imgData.data[7]=255;

##### JavaScript Syntax #####

There are two versions of the createImageData() method:

1.This creates a new ImageData object with the specified dimensions (in pixels):

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>var imgData=context.createImageData(width,height);</td> 
  </tr> 
 </tbody> 
</table>

2.This creates a new ImageData object with the same dimensions as the object specified by anotherImageData (this does not copy the image data):

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>var imgData=context.createImageData(imageData);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">The width of the new ImageData object, in pixels</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">The height of the new ImageData object, in pixels</td> 
  </tr> 
  <tr> 
   <td align="left">imageData</td> 
   <td align="left">anotherImageData object</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Create a 100\*100 pixels ImageData object, and put it onto the canvas: ######

![6cb5c94ab8e8d33668bb9a26b6d788c8.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var imgData = ctx.createImageData(100, 100);
    
    var i;
    for (i = 0; i < imgData.data.length / 2; i += 4) { 
        imgData.data[i+0] = 255;
        imgData.data[i+1] = 0;
        imgData.data[i+2] = 0;
        imgData.data[i+3] = 255;
    }
    
    for (i = imgData.data.length / 2; i < imgData.data.length; i += 4) { 
        imgData.data[i+0] = 0;
        imgData.data[i+1] = 255;
        imgData.data[i+2] = 0;
        imgData.data[i+3] = 255;
    }
    
    ctx.putImageData(imgData, 10, 10);

#### getImageData() ####

Returns an ImageData object that copies the pixel data for the specified rectangle on a canvas

##### Definition and Usage #####

The getImageData() method returns an ImageData object that copies the pixel data for the specified rectangle on a canvas.

**Note:** The ImageData object is not a picture, it specifies a part (rectangle) on the canvas, and holds information of every pixel inside that rectangle.

For every pixel in an ImageData object there are four pieces of information, the RGBA values:

*  R - The color red (from 0-255)
 *  G - The color green (from 0-255)
 *  B - The color blue (from 0-255)
 *  A - The alpha channel (from 0-255; 0 is transparent and 255 is fully visible)

The color/alpha information is held in an array, and is stored in the data property of the ImageData object.

**Tip:** After you have manipulated the color/alpha information in the array, you can copy the image data back onto the canvas with the putImageData() method.

**Example:**

The code for getting color/alpha information of the first pixel in the returned ImageData object:

red=imgData.data[0];
    green=imgData.data[1];
    blue=imgData.data[2];
    alpha=imgData.data[3];

**Tip:** You can also use the getImageData() method to invert the color of every pixels of an image on the canvas.

Loop through all the pixels and change the color values using this formula:

red=255-old_red;
    green=255-old_green;
    blue=255-old_blue;

See below for a try it yourself example!

--------------------

##### JavaScript Syntax #####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.getImageData(x,y,width,height);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x coordinate (in pixels) of the upper-left corner to start copy from</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y coordinate (in pixels) of the upper-left corner to start copy from</td> 
  </tr> 
  <tr> 
   <td align="left">width</td> 
   <td align="left">The width of the rectangular area you will copy</td> 
  </tr> 
  <tr> 
   <td align="left">height</td> 
   <td align="left">The height of the rectangular area you will copy</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 Use getImageData() to invert the color of every pixels of an image on the canvas ######

![c0f144f736fc2c25a32333ae4e58d406.png][]

![a683e2d7f982446def6f567841067f21.png][]

var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img=document.getElementById("scream");
    ctx.drawImage(img,0,0);
    var imgData=ctx.getImageData(0,0,c.width,c.height);
    // invert colors
    for (var i=0;i<imgData.data.length;i+=4)
      { 
      imgData.data[i]=255-imgData.data[i];
      imgData.data[i+1]=255-imgData.data[i+1];
      imgData.data[i+2]=255-imgData.data[i+2];
      imgData.data[i+3]=255;
      }
    ctx.putImageData(imgData,0,0);

#### putImageData() ####

Puts the image data (from a specified ImageData object) back onto the canvas

##### Definition and Usage #####

The putImageData() method puts the image data (from a specified ImageData object) back onto the canvas.

**Tip:** Read about the getImageData() method that copies the pixel data for a specified rectangle on a canvas.

**Tip:** Read about the createImageData() method that creates a new, blank ImageData object.

##### JavaScript Syntax #####

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);</td> 
  </tr> 
 </tbody> 
</table>

##### Parameter Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Parameter</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">imgData</td> 
   <td align="left">Specifies the ImageData object to put back onto the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">x</td> 
   <td align="left">The x-coordinate, in pixels, of the upper-left corner of the ImageData object</td> 
  </tr> 
  <tr> 
   <td align="left">y</td> 
   <td align="left">The y-coordinate, in pixels, of the upper-left corner of the ImageData object</td> 
  </tr> 
  <tr> 
   <td align="left">dirtyX</td> 
   <td align="left">Optional. The horizontal (x) value, in pixels, where to place the image on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">dirtyY</td> 
   <td align="left">Optional. The vertical (y) value, in pixels, where to place the image on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">dirtyWidth</td> 
   <td align="left">Optional. The width to use to draw the image on the canvas</td> 
  </tr> 
  <tr> 
   <td align="left">dirtyHeight</td> 
   <td align="left">Optional. The height to use to draw the image on the canvas</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 putImageData() with optional parameter ######

![8fe22960aeb25c921907ee5d9d394a67.png][]

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
    <canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
    
    <script> document.getElementById("scream").onload = function() { var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("scream"); ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(0, 0, c.width, c.height); // invert colors var i; for (i = 0; i < imgData.data.length; i += 4) { imgData.data[i] = 255 - imgData.data[i]; imgData.data[i+1] = 255 - imgData.data[i+1]; imgData.data[i+2] = 255 - imgData.data[i+2]; imgData.data[i+3] = 255; } ctx.putImageData(imgData, 0, 0, 0, 0, 110, 277); }; </script>

## Compositing ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Property</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">globalAlpha</td> 
   <td align="left">Sets or returns the current alpha or transparency value of the drawing</td> 
  </tr> 
  <tr> 
   <td align="left">globalCompositeOperation</td> 
   <td align="left">Sets or returns how a new image are drawn onto an existing image</td> 
  </tr> 
 </tbody> 
</table>

### Property ###

#### globalAlpha ####

Sets or returns the current alpha or transparency value of the drawing

##### Definition and Usage #####

The globalAlpha property sets or returns the current alpha or transparency value of the drawing.

The globalAlpha property value must be a number between 0.0 (fully transparent) and 1.0 (no transparancy).

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>1.0</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td>context.globalAlpha=number;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">number</td> 
   <td align="left">The transparency value. Must be a number between 0.0 (fully transparent) and 1.0 (no transparancy)</td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 First, draw a red rectangle, then set transparency (globalAlpha) to 0.5, and then draw a blue and a green rectangle ######

![e9895e312f4f74de2b92b5e90dc9c2e4.png][]

var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    ctx.fillStyle = "red";
    ctx.fillRect(20, 20, 75, 50);
    
    //Turn transparency on
    ctx.globalAlpha = 0.1;
    
    ctx.fillStyle = "blue"; 
    ctx.fillRect(50, 50, 75, 50);
    
    ctx.fillStyle = "green"; 
    ctx.fillRect(80, 80, 75, 50);

#### globalCompositeOperation ####

Sets or returns how a new image are drawn onto an existing image

##### Definition and Usage #####

The globalCompositeOperation property sets or returns how a source (new) image are drawn onto a destination (existing) image.

*source image =* drawings you are about to place onto the canvas.

*destination image =* drawings that are already placed onto the canvas.

<table> 
 <thead> 
  <tr> 
   <th align="left"></th> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">Default value:</td> 
   <td>source-over</td> 
  </tr> 
  <tr> 
   <td align="left">JavaScript syntax:</td> 
   <td><em>context</em>.globalCompositeOperation=“source-in”;</td> 
  </tr> 
 </tbody> 
</table>

##### Property Values #####

<table> 
 <thead> 
  <tr> 
   <th align="left">Value</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">source-over</td> 
   <td align="left">Default. Displays the <em>source image</em> over the <em>destination image</em></td> 
  </tr> 
  <tr> 
   <td align="left">source-atop</td> 
   <td align="left">Displays the <em>source image</em> on top of the <em>destination image</em>. The part of the <em>source image</em> that is outside the <em>destination image</em> is not shown</td> 
  </tr> 
  <tr> 
   <td align="left">source-in</td> 
   <td align="left">Displays the <em>source image</em> in to the <em>destination image</em>. Only the part of the <em>source image</em> that is INSIDE the <em>destination image</em> is shown, and the <em>destination image</em> is transparent</td> 
  </tr> 
  <tr> 
   <td align="left">source-out</td> 
   <td align="left">Displays the <em>source image</em> out of the <em>destination image</em>. Only the part of the <em>source image</em> that is OUTSIDE the <em>destination image</em> is shown, and the <em>destination image</em> is transparent</td> 
  </tr> 
  <tr> 
   <td align="left">destination-over</td> 
   <td align="left">Displays the <em>destination image</em> over the <em>source image</em></td> 
  </tr> 
  <tr> 
   <td align="left">destination-atop</td> 
   <td align="left">Displays the <em>destination image</em> on top of the <em>source image</em>. The part of the <em>destination image</em> that is outside the <em>source image</em> is not shown</td> 
  </tr> 
  <tr> 
   <td align="left">destination-in</td> 
   <td align="left">Displays the <em>destination image</em> in to the <em>source image</em>. Only the part of the <em>destination image</em> that is INSIDE the <em>source image</em> is shown, and the <em>source image</em> is transparent</td> 
  </tr> 
  <tr> 
   <td align="left">destination-out</td> 
   <td align="left">Displays the <em>destination image</em> out of the <em>source image</em>. Only the part of the <em>destination image</em> that is OUTSIDE the <em>source image</em> is shown, and the <em>source image</em> is transparent</td> 
  </tr> 
  <tr> 
   <td align="left">lighter</td> 
   <td align="left">Displays the <em>source image</em> + the <em>destination image</em></td> 
  </tr> 
  <tr> 
   <td align="left">copy</td> 
   <td align="left">Displays the <em>source image.</em> The <em>destination image</em> is ignored</td> 
  </tr> 
  <tr> 
   <td align="left">xor</td> 
   <td align="left">The <em>source image</em> is combined by using an exclusive OR with the <em>destination image</em></td> 
  </tr> 
 </tbody> 
</table>

##### Example #####

###### 1 All the globalCompositeOperation property values ######

![e0f84b3382050498a5904045e731e9ea.png][]

var gco = new Array();
    gco.push("source-atop");
    gco.push("source-in");
    gco.push("source-out");
    gco.push("source-over");
    gco.push("destination-atop");
    gco.push("destination-in");
    gco.push("destination-out");
    gco.push("destination-over");
    gco.push("lighter");
    gco.push("copy");
    gco.push("xor");
    
    var n;
    for (n = 0; n < gco.length; n++) { 
    	document.write("<div id='p_" + n + "' style='float:left;'>" + gco[n] + ":<br>");
    	var c = document.createElement("canvas");
    	c.width = 120;
    	c.height = 100;
    	document.getElementById("p_" + n).appendChild(c);
    	
        var ctx = c.getContext("2d");    
    	ctx.fillStyle = "blue";
    	ctx.fillRect(10, 10, 50, 50);
    	
        ctx.globalCompositeOperation = gco[n];
    	
        ctx.beginPath();
    	ctx.fillStyle = "red";
    	ctx.arc(50, 50, 30, 0, 2 * Math.PI);
    	ctx.fill();
    	document.write("</div>");	
    }

## Other ##

<table> 
 <thead> 
  <tr> 
   <th align="left">Method</th> 
   <th align="left">Description</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">save()</td> 
   <td align="left">Saves the state of the current context (Push the current state on the state stack)</td> 
  </tr> 
  <tr> 
   <td align="left">restore()</td> 
   <td align="left">Returns previously saved path state and attributes (Remove the top state from the state stack and thus restore the previous state that was pushed on the state stack)</td> 
  </tr> 
  <tr> 
   <td align="left">getContext()</td> 
   <td align="left">Returns the so-called context, i.e. an object that exposes an API for drawing on the canvas.</td> 
  </tr> 
  <tr> 
   <td align="left">toDataURL()</td> 
   <td align="left">Returns a ‘data:’ URL for the image in the canvas</td> 
  </tr> 
 </tbody> 
</table>

### Method ###

#### save() ####

##### Definition and Usage #####

Push the current state on the state stack.

A drawing state is the set of the current settings of a CanvasRenderingContext2D object. It includes:

*  the current style values (strokeStyle and fillStyle),
 *  globalAlpha and globalCompositeOperation,
 *  the line (lineWidth, lineCap, lineJoin, miterLimit),
 *  shadow (shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor)
 *  text settings (font, textAlign, textBaseline),
 *  the current clipping region
 *  the current transformation matrix.

Each CanvasRenderingContext2D object maintains a stack of drawing states. And with save() and restore(), drawing states can be pushed onto this stack and recovered at a later point.

Note, that the drawing state does not include the current path or bitmaps. So save() and restore() do not save and restore entire canvas pictures, i.e. entire contents of the given context. For that, you should use ImageData objects and the getImageData() and putImageData() methods (see the chapter on pixel manipulation).

##### Example #####

###### 1 save() and restore() ######

Suppose we draw 5 figures, each one a fillRect() rectangle with two lines of strokeText() text in it, like so:

![bd70e5568fe740342e8558b24cb4684c.png][]

As it is apparent from the picture, we use 3 different style settings for the 5 figures, defined as *states*:

*  State A with a linear gradient fillStyle, running from top red to bottom green and yellow strokeStyle.
 *  State B with a radial gradient fillStyle, running from a orange center start to an outer green end circle and green strokeStyle.
 *  State C with dark gray fillStyle and light gray strokeStyle.

We could generate the previous canvas by following these steps:

1.  declare *State A* and draw Figure 1 and 5
2.  declare *State B* and draw Figure 2 and 4
3.  declare *State C* and draw Figure 3

But since we want to demonstrate the use of save() and restore(), we create the Figures in their presented order:

1.  set *State A*, draw Figure 1 and save *State A* on the state stack
2.  set *State B*, draw Figure 2 and save *State B* on the state stack
3.  set *State C* and draw Figure 3
4.  overwrite *State C* by restoring *State B* from the stack and draw Figure 4
5.  restore *State A* and draw Figure 5

The full source code that actually generated the canvas is this:

// Text style settings (these will be part of Start A, B, and C alike, because they do not change) 
    context.textAlign = 'center';
    context.textBaseline = 'middle';
    context.lineWidth = 2.0;
    context.font = '25px Arial';    
    // Settings for State A 
    var verticalGrad = context.createLinearGradient (0,0,0,200);
    verticalGrad.addColorStop (0,'red');
    verticalGrad.addColorStop (1,'green');
    context.fillStyle = verticalGrad;                                      
    context.strokeStyle = 'yellow';
    // Draw Figure 1 
    context.fillRect (25,25,100,150);
    context.strokeText ("Fig 1",75,50);
    context.strokeText ("State A", 75,125);  
    // Save State A
    context.save();  
    
    // Settings for State B
    var radGrad = context.createRadialGradient (375,100,5, 375,100,200);
    radGrad.addColorStop (0,'orange');
    radGrad.addColorStop (1,'yellow');
    context.fillStyle = radGrad;
    context.strokeStyle = 'green';  
    // Draw Figure 2
    context.fillRect (175,25,100,150);
    context.strokeText ("Fig 2",225,50);  
    context.strokeText ("State B",225,125);  
    // Save State B
    context.save();  
    
    // Settings for State C
    context.fillStyle = '#888888';
    context.strokeStyle = '#EEEEEE';  
    // Draw Figure 3
    context.fillRect (325,25,100,150);
    context.strokeText ("Fig 3",375,50);  
    context.strokeText ("State C",375,125);  
    
    // Pop State C and restore State B
    context.restore();  
    // Draw Figure 4
    context.fillRect (475,25,100,150);
    context.strokeText ("Fig 4",525,50);  
    context.strokeText ("State B",525,125);  
    
    // Pop state B and restore state A
    context.restore();  
    // Draw Figure 5
    context.fillRect (625,25,100,150);
    context.strokeText ("Fig 5",675,50); 
    context.strokeText ("State A",675,125);

#### restore() ####

Remove the top state from the state stack and thus restore the previous state that was pushed on the state stack.

##### Example #####

参考上文save()的Example

#### getContext() ####

HTMLCanvasElement.getContext (contextId)

returns the so-called context, i.e. an object that exposes an API for drawing on the canvas. Currently, only the CanvasRenderingContext2D object is supported, and for that the contextId is ‘2d’. The result of this call will be null if the given context ID is not supported.

This context, which will always be the 2D context in the sequel, is attached to the canvas and accessible by a call of canvas.getContext(‘2d’). This context is where all the action takes place. It provides the interface for all the drawings added to the given canvas and explaining the CanvasRenderingContext2D object below is thus the biggest part of this manual.

The \[W3C\] document announces that there will probably be a ‘3d’ context in the future, based on the OpenGL ES API.

##### Example #####

略

#### toDataURL() ####

Returns a data: URL for the image in the canvas. The first optional type argument controls the type of the image to be returned (e.g. PNG or JPEG). The default type is ‘image/png’ for PNG images. The other arguments are specific to the type and control the way that the image is generated.

##### Example #####

###### 1 Convert the canvas into a data URL ######

Let us consider a very tiny canvas example, say a red 20x20 pixel rectangle

![7fcbeeaffe08597e3db11e0e9597608b.png][]

generated by the following code

<canvas id="DataUrlSample" width=20 height=20></canvas>
    <script> var canvas = document.getElementById ('DataUrlSample'); var context = canvas.getContext ('2d'); context.fillStyle = 'red'; context.fillRect (0, 0, 20, 20); </script>

We can now convert the canvas into a PNG data URL by calling:

var dataUrl = canvas.toDataURL();

and dataUrl now holds this string:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAK0lEQVQ4T2P8z8Dwn4GKgHHUQIpDczQMKQ5ChtEwHA1DMkJgNNmQEWhoWgBMAiftPRtHngAAAABJRU5ErkJggg==

If you copy this string and put it into the address field of your browser, you should see the picture of the red square.

We can also convert to a JPEG like so

var dataUrl = canvas.toDataURL('image/jpeg');

and then the result is this string:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCAAUABQDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAj/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFgEBAQEAAAAAAAAAAAAAAAAAAAcJ/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AnQBDGqYAAAAAD//Z

You can copy all this and call it in your browser to get the little red square, again.

For a more convenient solution, we can attach these lines to the previous code:

canvas.onclick = function () { 
      window.location = canvas.toDataURL('image/png');
    };

If we then click on the canvas, the browser opens the data URL into the address field and thus shows the image. And then, the user can choose to save this image as a PNG file.

[Link 1]: https://www.quanzhanketang.com/tags/ref_canvas.html
[Link 2]: https://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html
[797a349b57d08f81b79716137b68c13b.png]: /images/20220829/7bef91acfb154bf5b67fc863640fe633.png
[855260508fb2f57b022b10dba8f6b5c5.png]: /images/20220829/972320bf64e049c6a5adb9c0fd0afb00.png
[ab201653f7fb5b9d5c66e3163c6c14cb.png]: /images/20220829/802945b769774df68385413e6ad3d978.png
[d843f4af3f771828eb2f8c6d77532b48.png]: /images/20220829/910945624d584adda681aa7e787a8213.png
[45a7c91ac8510ce94066cdc21862e7c5.png]: /images/20220829/cc9677a590494f6dba8425894e9bd139.png
[1860b07b81e7ba445bcc4c54d6ab0fd6.png]: /images/20220829/c8898f59443943d5903b93caf38221ae.png
[c3cc089805318b005826845b86bda4ca.png]: /images/20220829/4fccb9af0b334d6fac6edb83dd8432fd.png
[b309b7ba89430eb938e39976c34d59c3.png]: /images/20220829/3e5814c55a6e4e57b06ea54775d11b76.png
[89bc2f091419fe4622503d7cb8f958df.png]: /images/20220829/6c80e725569f47a0a861000a85ad5201.png
[7c648ec3bd25064fb7ce186c5b5bd1eb.png]: /images/20220829/03e2390a36d34660a725133cb9e53e4c.png
[871a8cf7240ac8678b23dc21c4314346.png]: /images/20220829/14824a9fde9d4de7b3e94d6325cdf239.png
[2fbe17d971893f44602dbd82bfd41e8e.png]: /images/20220829/6a5df4e2ceb644dcaeca6a0b8d3acbed.png
[dd5e2b2e0f5f6d2ac956265ea1e2f376.png]: /images/20220829/36b8cf2313f14be1b50e3b367865d7a7.png
[097123a5ab41ce258309b84a3e4d9c23.png]: /images/20220829/84ab1a70229c4498b1504e9fb50e7624.png
[b0dec48cb83dc6a57bf5289a9251bfc8.png]: /images/20220829/7aa55fc0c69a43759e8aa68241f920e1.png
[c9cf1d06f0fcf99b67bdb16eddff3939.png]: /images/20220829/10896acc365d458aa0954a81233d64c6.png
[812093d54c9bb313ffc5bcf6d427149e.png]: /images/20220829/99387438f96347aca4f19b85c7d4124b.png
[25279418ea7cd0840d63c3f8b2e4c74a.png]: /images/20220829/ad9b1623bfe942348adce1aeb03b83a8.png
[e5714fd6a40882f16d7bbb0e4067dce5.png]: /images/20220829/b27a79384a984d779cc8de6bb4ff4055.png
[1679f31faccb84015b731882a8af9e37.png]: /images/20220829/20402409440549729826ff69dc7053bc.png
[Miter Limit figure 1]: /images/20220829/c54719f11ff34a67884f64cf759bbe6a.png
[Miter Limit figure 2]: /images/20220829/a550319d1bbb466a81536ddd3787f7ed.png
[69a7d31cd689decd28b7a3d3e447369c.png]: /images/20220829/eadf8cfbfbe44f8b917de93ceaf30e11.png
[4a69804530bd7bd85733b8b09e61075b.png]: /images/20220829/cbd8f7099ff64f3b867054d2accd1957.png
[accce9c455392c9b9678edb14010a924.png]: /images/20220829/60ee80980fb64de0a61b9d5987a41759.png
[d2434167bc0a7f8f190ef67009af09dd.png]: /images/20220829/7eb43837cf9f432d9071042cbb1f3f4f.png
[855949fbd84c2a0188c711b44e39ce16.png]: /images/20220829/ff2ebf7d5cd54ed6b26ec0ca1128eceb.png
[231e4abaa664c13e01220e4dc3d11bf8.png]: /images/20220829/12b079ffe7e94f2e83c533962f182c4c.png
[e788081d3d673d4367cbf4a27536231e.png]: /images/20220829/15db25a1431b4356b3498920317b6fb3.png
[d3c43aebc03de88929da97958b1a0d73.png]: /images/20220829/8bbb85f4b6864a3d84667b14f2482390.png
[6e15f1fb16e449845f070a97b8072425.png]: /images/20220829/07defcd1f00645a19a3456e3f5bd4ecb.png
[d468477ce1500704728abf547ab4c51b.png]: /images/20220829/6566cd7b750b48f9afdc7ec5f011b253.png
[e431d39a98fe3c26d7d7a12a832f5d9d.png]: /images/20220829/11134329f73b467d8fac69b484ffc01b.png
[Link 1 1]: https://baike.baidu.com/item/%E8%B4%9D%E5%A1%9E%E5%B0%94%E6%9B%B2%E7%BA%BF/1091769?fr=aladdin
[A quadratic B_zier curve]: /images/20220829/1beb7a03ea5d4228af8f96149323a031.png
[9e4b98cf9cd8ce4a3cf10458a2993d47.png]: /images/20220829/bcd8782e0eea4bb3ac6b51af3cdebc65.png
[A cubic bezier curve]: /images/20220829/c6ba6988471f453c8ede3f153d13b568.png
[1366dd53b2589d388552e14c9ead1677.png]: /images/20220829/b173ad0d9c6c459a93b7c268247329f7.png
[An arc]: /images/20220829/8ab2486fcbb143a0875be7a3afcbb593.png
[7a89d89f10dd66ad2ffaff83dbb7a068.png]: /images/20220829/2f3e1cb84b544967a9fcbece58455206.png
[Canvas arcto_ diagram]: /images/20220829/dc109158b6144bfb937aa193dc2fc267.png
[2045a92f4c0af65c0f8b41e6c8033f88.png]: /images/20220829/414fa30429a34d3abfc8e8b40826cb3a.png
[c9d7cf0198bbfbf47be02aede7d3638a.png]: /images/20220829/3a9791cc00a447edaa9d6f9cf1c13657.png
[5defeae06fdeb8f0cad78602ac6e1b0e.png]: /images/20220829/d6002bd43d264ac092aaeb6e2d7eb67b.png
[6c0d9b3b825b3cb3ed8552a86cfe6e2c.png]: /images/20220829/de3ce7326eaa44a38df5e77b34f1bbdb.png
[Illustration of the translate_ method]: /images/20220829/a7b13c8da6a04028905cdcf8562cc95f.png
[304c0b39e99ac13dc016ffb7127b31a3.png]: /images/20220829/21d458173dbd4d0ea2a4337ee9fc1aa8.png
[155c262d38988889d77c0641e2577083.png]: /images/20220829/e72cda70fb1f4bac867009e85d6ea16e.png
[b89e697954613414853fe2bf5548ebd5.png]: /images/20220829/b72dca3abe6e4bc698c4ba281baed93a.png
[0e9bf11006e4f0977557628ae9215804.png]: /images/20220829/ca3e1ad7bb6041148f0dcf91b26447b7.png
[34e8ff454d42a583e2b772a3ac93b8a6.png]: /images/20220829/940a316410d6420191ba5870b783d7b3.png
[textBaseline illustration]: /images/20220829/29136908cadd43ddbd7956306cec13ae.png
[f6c46eb2898d1d1ce7bd0777f2e1b94b.png]: /images/20220829/b0ecd98609c445efb3a999b9096c05ee.png
[19565d1538970634464980c709e0b85a.png]: /images/20220829/dc5855a59e0b409091432d1e0aa54ef3.png
[d36c6fedad0e327ab0c1bae21ebff2a4.png]: /images/20220829/9d4459d474094fc784494348f84a7891.png
[0b610adedec5644948cdaca7d42c8936.png]: /images/20220829/d5b67f1973524c3ea77009d9d8efe52e.png
[8fc4f97b9ec1f89be0938b8c24752e1b.png]: /images/20220829/22febe464a91420bb6d0b38eb0f4d7dc.png
[a0c162521f87ca304bb6280ab9cd5a02.png]: /images/20220829/3d6a3c06f53840e086f234d09a1c2676.png
[4d061212ba0e6996a936b9cb10b7bce8.png]: /images/20220829/85aa3c25dcd34b8f9db99eb13666e64c.png
[b0b3a591c96aef02405d5b05723fe150.png]: /images/20220829/719fbcc08d564c65bf6cc06f59011a81.png
[6cb5c94ab8e8d33668bb9a26b6d788c8.png]: /images/20220829/8e6bd857825b454c9cac916766aa9ee1.png
[c0f144f736fc2c25a32333ae4e58d406.png]: /images/20220829/f138320723984df29a11425fd64c95bf.png
[a683e2d7f982446def6f567841067f21.png]: /images/20220829/f03ae3a5ee16431285e6a574f3c24aa1.png
[8fe22960aeb25c921907ee5d9d394a67.png]: /images/20220829/6a03bd9333f140a5a793df428d977ca8.png
[e9895e312f4f74de2b92b5e90dc9c2e4.png]: /images/20220829/3817f1b45bbf42bc8c906732df17a251.png
[e0f84b3382050498a5904045e731e9ea.png]: /images/20220829/8c7e64f999754a24807b56c54f25a1fd.png
[bd70e5568fe740342e8558b24cb4684c.png]: /images/20220829/f2582c0fb06b4256ba90eee5b7e1d311.png
[7fcbeeaffe08597e3db11e0e9597608b.png]: /images/20220829/f762bf86a27340389afec6f37f2a4ab2.png