CanvasRenderingContext2D
- fillRect()
- fillStyle
- clearRect()
- strokeRect()
- fillText()
- strokeText()
- measureText()
- lineWidth
- strokeStyle
- stroke()
- beginPath()
- moveTo()
- lineTo()
- closePath()
- lineCap
- lineJoin
- miterLimit
- font
- textAlign
- textBaseline
- createPattern()
- bezierCurveTo()
- quadraticCurveTo()
- arc()
- arcTo()
- rect()
- fill()
- clip()
- rotate()
- scale()
- transform()
- setTransform()
- translate()
- globalAlpha
- drawImage()
- restore()
- save()
- createLinearGradient()6+
- createImageData()
- getImageData()
- putImageData()
- setLineDash()
- getLineDash()
- lineDashOffset
- globalCompositeOperation
- shadowBlur
- shadowColor
- shadowOffsetX
- shadowOffsetY
CanvasRenderingContext2D allows you to draw rectangles, text, images, and other objects on a canvas.
-
Example
<!-- xxx.hml --> <canvas ref="canvas1" style="width: 200px; height: 150px; background-color: #ffff00;"></canvas> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// 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(); }, }
-
fillRect()
Fills a rectangle on the canvas.
-
Parameter
-
Return Value
N/A
-
Example
ctx.fillRect(20, 20, 200, 150);
fillStyle
Sets the style to fill an area.
-
Parameter
-
Return Value
N/A
-
Example
ctx.fillStyle = '#0000ff'; ctx.fillRect(20, 20, 150, 100);
clearRect()
Clears the content in a rectangle on the canvas.
-
Parameter
-
Return Value
N/A
-
Example
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
X-coordinate of the upper left corner of the rectangle stroke
Y-coordinate of the upper left corner of the rectangle stroke
-
Return Value
N/A
-
Example
ctx.strokeRect(30, 30, 200, 150);
fillText()
Draws filled text on the canvas.
-
Parameter
-
Return Value
N/A
-
Example
ctx.font = '35px sans-serif'; ctx.fillText("Hello World!", 20, 60);
strokeText()
Draws a text stroke on the canvas.
-
Parameter
-
Return Value
N/A
-
Example
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
-
Return Value
Object that contains the text width. You can obtain the width by TextMetrics.width.
-
Example
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
-
Return Value
N/A
-
Example
ctx.lineWidth = 5; ctx.strokeRect(25, 25, 85, 105);
strokeStyle
Sets the stroke style.
-
Parameter
-
Return Value
N/A
-
Example
ctx.lineWidth = 10; ctx.strokeStyle = '#0000ff'; ctx.strokeRect(25, 25, 155, 105);
stroke()
Draws a stroke.
-
Parameter
N/A
-
Return Value
N/A
-
Example
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
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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
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
Style of line endpoints. Available values include:
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
ctx.font = '30px sans-serif'; ctx.fillText("Hello World", 20, 60);
textAlign
Sets the text alignment mode.
-
Parameter
Text alignment mode. Available values include:
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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
Source image. For details, see Image.
Repetition mode. The value can be "repeat", "repeat-x", "repeat-y", or "no-repeat".
-
Return Value
-
Example
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
-
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
-
Return Value
N/A
-
Example
ctx.beginPath(); ctx.moveTo(20, 20); ctx.quadraticCurveTo(100, 100, 200, 20); ctx.stroke();
arc()
Draws an arc on the canvas.
-
Parameter
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
ctx.moveTo(100, 20); ctx.arcTo(150, 20, 150, 70, 50); // Create an arc. ctx.stroke();
rect()
Creates a rectangle.
-
Parameter
-
Return Value
N/A
-
Example
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
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
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
Clockwise rotation angle. You can use Math.PI / 180 to convert the angle to a radian.
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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.
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
ctx.fillRect(10, 10, 50, 50); ctx.translate(70, 70); ctx.fillRect(10, 10, 50, 50);
globalAlpha
Sets the alpha value.
-
Parameter
Global alpha value to set. The value ranges from 0.0 (completely transparent) to 1.0 (completely opaque).
-
Return Value
N/A
-
Example
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
Image resource. For details, see Image.
X-coordinate of the upper left corner of the rectangle used to crop the source image.
Y-coordinate of the upper left corner of the rectangle used to crop the source image.
X-coordinate of the upper left corner of the drawing area on the canvas.
Y-coordinate of the upper left corner of the drawing area on the canvas.
-
Return Value
N/A
-
Example
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.
-
Parameter
-
Return Value
-
Example
<!-- xxx.hml --> <canvas ref="canvas" style="width: 500px; height: 500px; background-color: #ffff00;"></canvas> <input type="button" style="width: 180px; height: 60px;" value="fillStyle" onclick="handleClick" />
// 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.
-
Parameter
ImageData object with the same width and height copied from the original ImageData object
-
Return Value
-
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
-
Return Value
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
X-axis offset of the upper left corner of the rectangular area relative to that of the source image
Y-axis offset of the upper left corner of the rectangular area relative to that of 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
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
Interval of alternate line segments and the length of spacing
-
Example
var info = ctx.getLineDash();
lineDashOffset
Sets the dash line offset.
-
Parameter
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
Attribute
-
Return Value
N/A
-
Example
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
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
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
-
Return Value
N/A
-
Example
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
-
Return Value
N/A
-
Example
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.