# CanvasRenderingContext2D - [fillRect\(\)](#en-us_topic_0000001058830807_section16678142165920) - [fillStyle](#en-us_topic_0000001058830807_section159395553313) - [clearRect\(\)](#en-us_topic_0000001058830807_section205940367194) - [strokeRect\(\)](#en-us_topic_0000001058830807_section18427819195711) - [fillText\(\)](#en-us_topic_0000001058830807_section114524106587) - [strokeText\(\)](#en-us_topic_0000001058830807_section4144191355810) - [measureText\(\)](#en-us_topic_0000001058830807_section378313153588) - [lineWidth](#en-us_topic_0000001058830807_section652391716583) - [strokeStyle](#en-us_topic_0000001058830807_section1191517562337) - [stroke\(\)](#en-us_topic_0000001058830807_section1071523411019) - [beginPath\(\)](#en-us_topic_0000001058830807_section12670134392) - [moveTo\(\)](#en-us_topic_0000001058830807_section16813157310) - [lineTo\(\)](#en-us_topic_0000001058830807_section4767915838) - [closePath\(\)](#en-us_topic_0000001058830807_section86825473917) - [lineCap](#en-us_topic_0000001058830807_section6852133718410) - [lineJoin](#en-us_topic_0000001058830807_section395812401442) - [miterLimit](#en-us_topic_0000001058830807_section429711421945) - [font](#en-us_topic_0000001058830807_section17597332121110) - [textAlign](#en-us_topic_0000001058830807_section15681153321114) - [textBaseline](#en-us_topic_0000001058830807_section77981136141111) - [createPattern\(\)](#en-us_topic_0000001058830807_section1034582183919) - [bezierCurveTo\(\)](#en-us_topic_0000001058830807_section450521614318) - [quadraticCurveTo\(\)](#en-us_topic_0000001058830807_section12938183173) - [arc\(\)](#en-us_topic_0000001058830807_section102329511716) - [arcTo\(\)](#en-us_topic_0000001058830807_section3172156571) - [rect\(\)](#en-us_topic_0000001058830807_section1351519304107) - [fill\(\)](#en-us_topic_0000001058830807_section14842031151015) - [clip\(\)](#en-us_topic_0000001058830807_section1355171921416) - [rotate\(\)](#en-us_topic_0000001058830807_section7682182091419) - [scale\(\)](#en-us_topic_0000001058830807_section157714218144) - [transform\(\)](#en-us_topic_0000001058830807_section1675964717570) - [setTransform\(\)](#en-us_topic_0000001058830807_section1439382216440) - [translate\(\)](#en-us_topic_0000001058830807_section931011253449) - [globalAlpha](#en-us_topic_0000001058830807_section188252174810) - [drawImage\(\)](#en-us_topic_0000001058830807_section1953117410488) - [restore\(\)](#en-us_topic_0000001058830807_section64027684817) - [save\(\)](#en-us_topic_0000001058830807_section410672635214) - [createLinearGradient\(\)6+](#en-us_topic_0000001058830807_section1696310905) - [createImageData\(\)](#en-us_topic_0000001058830807_section2021142714524) - [getImageData\(\)](#en-us_topic_0000001058830807_section92731528205217) - [putImageData\(\)](#en-us_topic_0000001058830807_section15774154925515) - [setLineDash\(\)](#en-us_topic_0000001058830807_section1934985155516) - [getLineDash\(\)](#en-us_topic_0000001058830807_section522105285519) - [lineDashOffset](#en-us_topic_0000001058830807_section8283548889) - [globalCompositeOperation](#en-us_topic_0000001058830807_section123871750284) - [shadowBlur](#en-us_topic_0000001058830807_section6207051888) - [shadowColor](#en-us_topic_0000001058830807_section42724396120) - [shadowOffsetX](#en-us_topic_0000001058830807_section1616174021219) - [shadowOffsetY](#en-us_topic_0000001058830807_section272013417128) **CanvasRenderingContext2D** allows you to draw rectangles, text, images, and other objects on a canvas. - Example ``` ``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas1; const ctx = el.getContext('2d'); ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); }, } ``` - ![](figures/en-us_image_0000001089583647.png) ## fillRect\(\) Fills a rectangle on the canvas. - Parameter

Name

Type

Description

x

number

X-coordinate of the upper left corner of the rectangle

y

number

Y-coordinate of the upper left corner of the rectangle

width

number

Width of the rectangle

height

number

Height of the rectangle
- Return Value N/A - Example ![](figures/en-us_image_0000001059340532.png) ``` ctx.fillRect(20, 20, 200, 150); ``` ## fillStyle Sets the style to fill an area. - Parameter

Name

Type

Description

color

<color>

Color used to fill the area

gradient

CanvasGradient

CanvasGradient object created via createLinearGradient()

pattern

CanvasPattern

CanvasPattern object created via createPattern()
- Return Value N/A - Example ![](figures/en-us_image_0000001058562863.png) ``` ctx.fillStyle = '#0000ff'; ctx.fillRect(20, 20, 150, 100); ``` ## clearRect\(\) Clears the content in a rectangle on the canvas. - Parameter

Name

Type

Description

x

number

X-coordinate of the upper left corner of the rectangle

y

number

Y-coordinate of the upper left corner of the rectangle

width

number

Width of the rectangle

height

number

Height of the rectangle
- Return Value N/A - Example ![](figures/en-us_image_0000001059308558.png) ``` ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 400, 200); ctx.clearRect(20, 20, 150, 100); ``` ## strokeRect\(\) Draws a rectangle stroke on the canvas. - Parameter

Name

Type

Description

x

number

X-coordinate of the upper left corner of the rectangle stroke

y

number

Y-coordinate of the upper left corner of the rectangle stroke

width

number

Width of the rectangle stroke

height

number

Height of the rectangle stroke
- Return Value N/A - Example ![](figures/en-us_image_0000001058670865.png) ``` ctx.strokeRect(30, 30, 200, 150); ``` ## fillText\(\) Draws filled text on the canvas. - Parameter

Name

Type

Description

text

string

Text to draw

x

number

X-coordinate of the lower left corner of the text

y

number

Y-coordinate of the lower left corner of the text
- Return Value N/A - Example ![](figures/en-us_image_0000001058948947.png) ``` ctx.font = '35px sans-serif'; ctx.fillText("Hello World!", 20, 60); ``` ## strokeText\(\) Draws a text stroke on the canvas. - Parameter

Name

Type

Description

text

string

Text stroke to draw

x

number

X-coordinate of the lower left corner of the text stroke

y

number

Y-coordinate of the lower left corner of the text stroke
- Return Value N/A - Example ![](figures/en-us_image_0000001058340529.png) ``` ctx.font = '25px sans-serif'; ctx.strokeText("Hello World!", 20, 60); ``` ## measureText\(\) Returns a **TextMetrics** object used to obtain the width of specified text. - Parameter

Name

Type

Description

text

string

Text to be measured
- Return Value

Type

Description

TextMetrics

Object that contains the text width. You can obtain the width by TextMetrics.width.
- Example ![](figures/en-us_image_0000001058988974.png) ``` ctx.font = '25px sans-serif'; var txt = 'Hello World'; ctx.fillText("width:" + ctx.measureText(txt).width, 20, 60); ctx.fillText(txt, 20, 110); ``` ## lineWidth Sets the width of a line. - Parameter

Name

Type

Description

lineWidth

number

Line width
- Return Value N/A - Example ![](figures/en-us_image_0000001059308560.png) ``` ctx.lineWidth = 5; ctx.strokeRect(25, 25, 85, 105); ``` ## strokeStyle Sets the stroke style. - Parameter

Name

Type

Description

color

<color>

Color of the stroke.

gradient

CanvasGradient

CanvasGradient object created via createLinearGradient()

pattern

CanvasPattern

CanvasPattern object created via createPattern()
- Return Value N/A - Example ![](figures/en-us_image_0000001058670867.png) ``` ctx.lineWidth = 10; ctx.strokeStyle = '#0000ff'; ctx.strokeRect(25, 25, 155, 105); ``` ## stroke\(\) Draws a stroke. - Parameter N/A - Return Value N/A - Example ![](figures/en-us_image_0000001058948949.png) ``` ctx.moveTo(25, 25); ctx.lineTo(25, 105); ctx.strokeStyle = 'rgb(0,0,255)'; ctx.stroke(); ``` ## beginPath\(\) Creates a drawing path. - Parameter N/A - Return Value N/A - Example ![](figures/en-us_image_0000001058340531.png) ``` ctx.beginPath(); ctx.lineWidth = '6'; ctx.strokeStyle = '#0000ff'; ctx.moveTo(15, 80); ctx.lineTo(280, 160); ctx.stroke(); ``` ## moveTo\(\) Moves a drawing path to a target position on the canvas. - Parameter

Name

Type

Description

x

number

X-coordinate of the target position

y

number

Y-coordinate of the target position
- Return Value N/A - Example ![](figures/en-us_image_0000001058988976.png) ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(280, 160); ctx.stroke(); ``` ## lineTo\(\) Connects the current point to a target position using a straight line. - Parameter

Name

Type

Description

x

number

X-coordinate of the target position

y

number

Y-coordinate of the target position
- Return Value N/A - Example ![](figures/en-us_image_0000001059308562.png) ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.lineTo(280, 160); ctx.stroke(); ``` ## closePath\(\) Draws a closed path. - Parameter N/A - Return Value N/A - Example ![](figures/en-us_image_0000001058830768.png) ``` ctx.beginPath(); ctx.moveTo(30, 30); ctx.lineTo(110, 30); ctx.lineTo(70, 90); ctx.closePath(); ctx.stroke(); ``` ## lineCap Sets the style of line endpoints. - Parameter

Name

Type

Description

lineCap

string

Style of line endpoints. Available values include:

  • butt (default): The endpoints of the line are squared off.
  • round: The endpoints of the line are rounded.
  • square: The endpoints of the line are squared off, and each endpoint has added a rectangle whose length is the same as the line thickness and whose width is half of the line thickness.
- Return Value N/A - Example ![](figures/en-us_image_0000001058830831.png) ``` ctx.lineWidth = 8; ctx.beginPath(); ctx.lineCap = 'round'; ctx.moveTo(30, 50); ctx.lineTo(220, 50); ctx.stroke(); ``` ## lineJoin Sets the style for the point where two lines intersect. - Parameter

Name

Type

Description

lineJoin

string

Intersection style. Available values include:

  • round: The intersection is a sector, whose radius at the rounded corner is equal to the line width.
  • bevel: The intersection is a triangle. The rectangular corner of each line is independent.
  • miter (default): The intersection has a miter corner by extending the outside edges of the lines until they meet. You can view the effect of this attribute in miterLimit.
- Return Value N/A - Example ![](figures/en-us_image_0000001058340533.png) ``` ctx.beginPath(); ctx.lineWidth = 8; ctx.lineJoin = 'miter'; ctx.moveTo(30, 30); ctx.lineTo(120, 60); ctx.lineTo(30, 110); ctx.stroke(); ``` ## miterLimit Sets the maximum miter length. The miter length is the distance between the inner corner and the outer corner where two lines meet. - Parameter

Name

Type

Description

miterLimit

number

Maximum miter length. The default value is 10.
- Return Value N/A - Example ![](figures/en-us_image_0000001058562869.png) ``` ctx.lineWidth = 8; ctx.lineJoin = 'miter'; ctx.miterLimit = 3; ctx.moveTo(30, 30); ctx.lineTo(60, 35); ctx.lineTo(30, 37); ctx.stroke(); ``` ## font Sets the font style. - Parameter

Name

Type

Description

value

string

Font style. sans-serif, serif, monospace are supported. The default value is 14px sans-serif..

Syntax: ctx.font="font-style font-weight font-size font-family"5+

Default value: "normal normal 14px sans-serif"

  • (Optional) font-style: specifies the font style. Available values are normal and italic.
  • (Optional) font-weight: specifies the font weight. Available values are as follows: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
  • (Optional) font-size: specifies the font size and its row height. The unit can only be pixels. The default value is 14px.
  • (Optional) font-family: specifies the font family. Available values are sans-serif, serif, and monospace.
- Return Value N/A - Example ![](figures/en-us_image_0000001059308564.png) ``` ctx.font = '30px sans-serif'; ctx.fillText("Hello World", 20, 60); ``` ## textAlign Sets the text alignment mode. - Parameter

Name

Type

Description

align

string

Text alignment mode. Available values include:

  • left (default): The text is left-aligned.
  • right: The text is right-aligned.
  • center: The text is center-aligned.
  • start: The text is aligned with the start bound.
  • end: The text is aligned with the end bound.
NOTE:

In the ltr layout mode, the value start is equal to left. In the rtl layout mode, the value start is equal to right.
- Return Value N/A - Example ![](figures/en-us_image_0000001058830770.png) ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(140, 10); ctx.lineTo(140, 160); ctx.stroke(); ctx.font = '18px sans-serif'; // Show the textAlign values. ctx.textAlign = 'start'; ctx.fillText('textAlign=start', 140, 60); ctx.textAlign = 'end'; ctx.fillText('textAlign=end', 140, 80); ctx.textAlign = 'left'; ctx.fillText('textAlign=left', 140, 100); ctx.textAlign = 'center'; ctx.fillText('textAlign=center',140, 120); ctx.textAlign = 'right'; ctx.fillText('textAlign=right',140, 140); ``` ## textBaseline Sets a text baseline in the horizontal direction for text alignment. - Parameter

Name

Type

Description

textBaseline

string

Text baseline. Available values include:

  • alphabetic (default): The text baseline is the normal alphabetic baseline.
  • top: The text baseline is on the top of the text bounding box.
  • hanging: The text baseline is a hanging baseline over the text.
  • middle: The text baseline is in the middle of the text bounding box.
  • ideographic: The text baseline is the ideographic baseline. If a character exceeds the alphabetic baseline, the ideographic baseline is located at the bottom of the excessive character.
  • bottom: The text baseline is at the bottom of the text bounding box. Its difference from the ideographic baseline is that the ideographic baseline does not consider letters in the next line.
- Return Value N/A - Example ![](figures/en-us_image_0000001058460539.png) ``` ctx.strokeStyle = '#0000ff'; ctx.moveTo(0, 120); ctx.lineTo(400, 120); ctx.stroke(); ctx.font = '20px sans-serif'; ctx.textBaseline = 'top'; ctx.fillText('Top', 10, 120); ctx.textBaseline = 'bottom'; ctx.fillText('Bottom', 55, 120); ctx.textBaseline = 'middle'; ctx.fillText('Middle', 125, 120); ctx.textBaseline = 'alphabetic'; ctx.fillText('Alphabetic', 195, 120); ctx.textBaseline = 'hanging'; ctx.fillText('Hanging', 295, 120); ``` ## createPattern\(\) Creates a pattern for image filling based on a specified source image and repetition mode. - Parameter

Name

Type

Description

image

Image

Source image. For details, see Image.

repetition

string

Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat".
- Return Value

Type

Description

Object

Pattern of image filling.
- Example ![](figures/en-us_image_0000001059148582.png) ``` var pat = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pat; ctx.fillRect(0, 0, 20, 20); ``` ## bezierCurveTo\(\) Draws a cubic bezier curve on the canvas. - Parameter

Name

Type

Description

cp1x

number

X-coordinate of the first parameter of the bezier curve

cp1y

number

Y-coordinate of the first parameter of the bezier curve

cp2x

number

X-coordinate of the second parameter of the bezier curve

cp2y

number

Y-coordinate of the second parameter of the bezier curve

x

number

X-coordinate of the end point on the bezier curve

y

number

Y-coordinate of the end point on the bezier curve
- Return Value N/A - Example ``` ctx.beginPath(); ctx.moveTo(10, 10); ctx.bezierCurveTo(20, 100, 200, 100, 200, 20); ctx.stroke(); ``` ## quadraticCurveTo\(\) Draws a quadratic curve on the canvas. - Parameter

Name

Type

Description

cpx

number

X-coordinate of the bezier curve parameter

cpy

number

Y-coordinate of the bezier curve parameter

x

number

X-coordinate of the end point on the bezier curve

y

number

Y-coordinate of the end point on the bezier curve
- Return Value N/A - Example ![](figures/en-us_image_0000001059308566.png) ``` ctx.beginPath(); ctx.moveTo(20, 20); ctx.quadraticCurveTo(100, 100, 200, 20); ctx.stroke(); ``` ## arc\(\) Draws an arc on the canvas. - Parameter

Name

Type

Description

x

number

X-coordinate of the center point of the arc

y

number

Y-coordinate of the center point of the arc

radius

number

Radius of the arc

startAngle

number

Start radian of the arc

endAngle

number

End radian of the arc

anticlockwise

boolean

Whether to draw the arc counterclockwise
- Return Value N/A - Example ![](figures/en-us_image_0000001058830772.png) ``` ctx.beginPath(); ctx.arc(100, 75, 50, 0, 6.28); ctx.stroke(); ``` ## arcTo\(\) Draws an arc based on the radius and points on the arc. - Parameter

Name

Type

Description

x1

number

X-coordinate of the first point on the arc

y1

number

Y-coordinate of the first point on the arc

x2

number

X-coordinate of the second point on the arc

y2

number

Y-coordinate of the second point on the arc

radius

number

Radius of the arc
- Return Value N/A - Example ![](figures/en-us_image_0000001058830835.png) ``` ctx.moveTo(100, 20); ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. ctx.stroke(); ``` ## rect\(\) Creates a rectangle. - Parameter

Name

Type

Description

x

number

X-coordinate of the upper left corner of the rectangle

y

number

Y-coordinate of the upper left corner of the rectangle

width

number

Width of the rectangle

height

number

Height of the rectangle
- Return Value N/A - Example ![](figures/en-us_image_0000001058340537.png) ``` ctx.rect(20, 20, 100, 100); // Create a 100*100 rectangle at (20, 20) ctx.stroke(); // Draw it ``` ## fill\(\) Fills the area inside a closed path. - Parameter N/A - Return Value N/A - Example ![](figures/en-us_image_0000001058988982.png) ``` ctx.rect(20, 20, 100, 100); // Create a 100 x 100 rectangle at (20, 20). ctx.fill(); // Fill the rectangle using default settings. ``` ## clip\(\) Sets the current path to a clipping path. - Parameter N/A - Return Value N/A - Example ![](figures/en-us_image_0000001059308568.png) ``` ctx.rect(0, 0, 200, 200); ctx.stroke(); ctx.clip(); // Clip a rectangle and fill it with red paint. ctx.fillStyle = "rgb(255,0,0)"; ctx.fillRect(0, 0, 150, 150); ``` ## rotate\(\) Rotates a canvas clockwise around its coordinate axes. - Parameter

Name

Type

Description

rotate

number

Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian.
- Return Value N/A - Example ![](figures/en-us_image_0000001058830774.png) ``` ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees. ctx.fillRect(70, 20, 50, 50); ``` ## scale\(\) Scales a canvas based on scaling factors. - Parameter

Name

Type

Description

x

number

Horizontal scale factor

y

number

Vertical scale factor
- Return Value N/A - Example ![](figures/en-us_image_0000001058830837.png) ``` ctx.strokeRect(10, 10, 25, 25); ctx.scale(2, 2);// Set a 200% scale factor for the rectangle. ctx.strokeRect(10, 10, 25, 25); ``` ## transform\(\) Defines a transformation matrix. To transform a graph, you only need to set parameters of the matrix. The coordinates of the graph are multiplied by the matrix values to obtain new coordinates of the transformed graph. You can use the matrix to implement multiple transform effects. >![](public_sys-resources/icon-note.gif) **NOTE:** >The following formulas calculate coordinates of the transformed graph. **x** and **y** represent coordinates before transformation, and **x'** and **y'** represent coordinates after transformation. >- x' = scaleX \* x + skewY \* y + translateX >- y' = skewX \* x + scaleY \* y + translateY - Parameter

Name

Type

Description

scaleX

number

X-axis scale

skewX

number

X-axis skew

skewY

number

Y-axis skew

scaleY

number

Y-axis scale

translateX

number

X-axis translation

translateY

number

Y-axis translation
- Return Value N/A - Example ![](figures/en-us_image_0000001058460543.png) ``` ctx.fillStyle = 'rgb(0,0,0)'; ctx.fillRect(0, 0, 100, 100) ctx.transform(1, 0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 100, 100); ctx.transform(1, 0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 100, 100); ``` ## setTransform\(\) Resets the existing transformation matrix and creates a new transformation matrix by using the same parameters as the **transform\(\)** function. - Parameter

Name

Type

Description

scaleX

number

X-axis scale

skewX

number

X-axis skew

skewY

number

Y-axis skew

scaleY

number

Y-axis scale

translateX

number

X-axis translation

translateY

number

Y-axis translation
- Return Value N/A - Example ![](figures/en-us_image_0000001059340544.png) ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 100, 100) ctx.setTransform(1,0.5, -0.5, 1, 10, 10); ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(0, 0, 100, 100); ``` ## translate\(\) Moves the origin of the coordinate system. - Parameter

Name

Type

Description

x

number

X-axis translation

y

number

Y-axis translation
- Return Value N/A - Example ![](figures/en-us_image_0000001058988984.png) ``` ctx.fillRect(10, 10, 50, 50); ctx.translate(70, 70); ctx.fillRect(10, 10, 50, 50); ``` ## globalAlpha Sets the alpha value. - Parameter

Name

Type

Description

value

number

Global alpha value to set. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).
- Return Value N/A - Example ![](figures/en-us_image_0000001059148586.png) ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(0, 0, 50, 50); ctx.globalAlpha = 0.4; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(50, 50, 50, 50); ``` ## drawImage\(\) Draws an image. - Parameter

Name

Type

Description

image

Image

Image resource. For details, see Image.

sx

number

X-coordinate of the upper left corner of the rectangle used to crop the source image.

sy

number

Y-coordinate of the upper left corner of the rectangle used to crop the source image.

sWidth

number

Target width to crop the source image.

sHeight

number

Target height to crop the source image.

dx

number

X-coordinate of the upper left corner of the drawing area on the canvas.

dy

number

Y-coordinate of the upper left corner of the drawing area on the canvas.

dWidth

number

Width of the drawing area.

dHeight

number

Height of the drawing area.
- Return Value N/A - Example ![](figures/en-us_image_0000001058830776.png) ``` var test = this.$element('drawImage'); var ctx = test.getContext('2d'); var img = new Image(); img.src = 'common/image/test.jpg'; ctx.drawImage(img, 50, 80, 80, 80); ``` ## restore\(\) Restores the saved drawing context. - Parameter N/A - Return Value N/A - Example ``` ctx.restore(); ``` ## save\(\) Saves the current drawing context. - Parameter N/A - Return Value N/A - Example ``` ctx.save(); ``` ## createLinearGradient\(\)6+ Creates a linear gradient. A CanvasGradient object is returned. For details, see [CanvasGradient](canvasgradient.md#EN-US_TOPIC_0000001162494623). - Parameter

Name

Type

Description

x0

number

X coordinate of the start point

y0

number

Y coordinate of the start point

x1

number

X coordinate of the end point

y1

number

Y coordinate of the end point
- Return Value

Type

Description

Object

Returns the created CanvasGradient object.
- Example ![](figures/en-us_image_0000001144077163.png) ``` ``` ``` // xxx.js export default { handleClick() { const el = this.$refs.canvas; const ctx = el.getContext('2d'); // Linear gradient: start(50,0) end(300,100) var gradient = ctx.createLinearGradient(50,0, 300,100); // Add three color stops gradient.addColorStop(0.0, 'red'); gradient.addColorStop(0.5, 'white'); gradient.addColorStop(1.0, 'green'); // Set the fill style and draw a rectangle ctx.fillStyle = gradient; ctx.fillRect(0, 0, 500, 500); } } ``` ## createImageData\(\) Creates an **ImageData** object. For details, see [ImageData](imagedata.md#EN-US_TOPIC_0000001115814838). - Parameter

Name

Type

Description

width

number

Width of the ImageData object

height

number

Height of the ImageData object

imagedata

Object

ImageData object with the same width and height copied from the original ImageData object
- Return Value

Type

Description

Object

Returns the newly created ImageData object.
- Example ``` imageData = ctx.createImageData(50, 100); // Create ImageData with 50px width and 100px height newImageData = ctx.createImageData(imageData); // Create ImageData using the input imageData ``` ## getImageData\(\) **ImageData** object created with pixels in the specified area on the canvas. - Parameter

Name

Type

Description

sx

number

X-coordinate of the upper left corner of the output area

sy

number

Y-coordinate of the upper left corner of the output area

sw

number

Width of the output area

sh

number

Height of the output area
- Return Value

Type

Description

Object

ImageData object that contains pixels in the specified area on the canvas
- Example ``` var test = this.$element('getImageData'); var ctx = test.getContext('2d'); var imageData = ctx.getImageData(0, 0, 280, 300); ``` ## putImageData\(\) Puts the **ImageData** onto a rectangular area on the canvas. - Parameter

Name

Type

Description

imagedata

Object

ImageData object with pixels to put onto the canvas

dx

number

X-axis offset of the rectangular area on the canvas

dy

number

Y-axis offset of the rectangular area on the canvas

dirtyX

number

X-axis offset of the upper left corner of the rectangular area relative to that of the source image

dirtyY

number

Y-axis offset of the upper left corner of the rectangular area relative to that of the source image

dirtyWidth

number

Width of the rectangular area to crop the source image

dirtyHeight

number

Height of the rectangular area to crop the source image
- Return Value N/A - Example ``` var test = this.$element('putImageData'); var ctx = test.getContext('2d'); var imgData = ctx.createImageData(100, 100); for (var i = 0; i < imgData.data.length; i += 4) { imgData.data[i + 0] = 255; imgData.data[i + 1] = 0; imgData.data[i + 2] = 0; imgData.data[i + 3] = 255; } ctx.putImageData(imgData, 10, 10); ``` ## setLineDash\(\) Sets the dash line style. - Parameter

Name

Type

Description

segments

Array

An array describing the interval of alternate line segments and length of spacing
- Return Value N/A - Example ``` ctx.setLineDash([10,20]); ``` ## getLineDash\(\) Obtains the dash line style. - Parameter N/A - Return Value

Type

Description

Array

Interval of alternate line segments and the length of spacing
- Example ``` var info = ctx.getLineDash(); ``` ## lineDashOffset Sets the dash line offset. - Parameter

Name

Type

Description

value

number

Dash line offset. The value is a floating point number starting from 0.0.
- Return Value N/A - Example ``` ctx.lineDashOffset = 1.0; ``` ## globalCompositeOperation Sets the composite operation type. - Parameter

Name

Type

Description

type

string

Type of the composite operation. Available values are as follows: source-over (default value), source-atop, source-in, source-out, destination-over, destination-atop, destination-in, destination-out, lighter, copy, and xor.
Attribute

Value

Description

source-over

Displays the new drawing above the existing drawing. This attribute is used by default.

source-atop

Displays the new drawing on the top of the existing drawing.

source-in

Displays the new drawing inside the existing drawing.

source-out

Displays part of the new drawing that is outside of the existing drawing.

destination-over

Displays the existing drawing above the new drawing.

destination-atop

Displays the existing drawing above the new drawing.

destination-in

Displays the existing drawing inside the new drawing.

destination-out

Displays part of the existing drawing that is outside of the new drawing.

lighter

Displays both the new drawing and the existing drawing.

copy

Displays the new drawing and neglects the existing drawing.

xor

Combines the new drawing and existing drawing using the XOR operation.
- Return Value N/A - Example ![](figures/en-us_image_0000001058948959.png) ``` ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 50, 50); ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(50, 50, 50, 50); // Start drawing second example ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(120, 20, 50, 50); ctx.globalCompositeOperation = 'destination-over'; ctx.fillStyle = 'rgb(0,0,255)'; ctx.fillRect(150, 50, 50, 50); ``` In the above example, the blue rectangle represents the new drawing, and the red rectangle represents the existing drawing. ## shadowBlur Sets the shadow blur degree. - Parameter

Name

Type

Description

blur

number

Shadow blur degree. A larger value indicates a more blurred shadow. The value is of the float type, and the default value is 0.
- Return Value N/A - Example ![](figures/en-us_image_0000001059340546.png) ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 100, 80); ``` ## shadowColor Sets the shadow color. - Parameter

Name

Type

Description

color

<color>

Shadow color
- Return Value N/A - Example ![](figures/en-us_image_0000001059148588.png) ``` ctx.shadowBlur = 30; ctx.shadowColor = 'rgb(0,0,255)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(30, 30, 100, 100); ``` ## shadowOffsetX Sets the x-axis shadow offset relative to the original object. - Parameter

Name

Type

Description

offsetX

number

X-axis shadow offset relative to the original object.
- Return Value N/A - Example ![](figures/en-us_image_0000001058670782.png) ``` ctx.shadowBlur = 10; ctx.shadowOffsetX = 20; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(20, 20, 100, 80); ``` ## shadowOffsetY Sets the y-axis shadow offset relative to the original object. - Parameter

Name

Type

Description

offsetY

number

Y-axis shadow offset relative to the original object.
- Return Value N/A - Example ![](figures/en-us_image_0000001058670879.png) ``` ctx.shadowBlur = 10; ctx.shadowOffsetY = 20; ctx.shadowColor = 'rgb(0,0,0)'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillRect(30, 30, 100, 100); ```