Canvas

Why use Canvas?

Canvas, the advanced brush extension.

Since it is called Advanced Brush, can it draw something? What is the difference between it and an ordinary brush?

Canvas is derived from the <canvas> tag in Html. Powered by JavaScript, Canvas is like a magic canvas to draw what you like.

Canvas has a rich API integrated inside to support you to draw what you like more easily and quickly.

Examples include flame effects, spinning pizza, and waterfall effects like the ones below.

Best Practices

comming soon……

Functions and Definitions

The Canvas coordinate system

Before we can start drawing with Canvas, we need to understand the Canvas coordinate system, which is slightly different from our Scratch coordinate system.

The Scratch coordinate system is shown in the following figure.

The origin of the Canvas coordinate system is at the top left corner, which is (0,0). 480 pixels long and 360 pixels wide. As shown in the figure below.

If you are new to Canvas coordinates, you can use coordinate conversion statements to convert Canvas coordinates to and from Scratch coordinates.

go to front layer

Move the current canvas to the top/bottom

Property	Description	Example Value
layer position	There are two options: - front: Move the current canvas to the top - back: Move the current canvas to the bottom	front

go forward 1 layer

Move the current canvas forward/backward a few layers

Property	Description	Example Value
layer position	There are two options: - forward: Move the current canvas forward - backward: Move the current canvas backward	forward
number	Number of layers moved	3

clear current canvas

All contents of the current canvas can be erased

💡

CAUTION The content in Canvas is drawn on the canvas. Using this statement to erase the content on the canvas is not the same as changing the settings - the brush color, line head, and line width settings are retained. To clear the canvas and reset the brush and line settings, you need to use the reset statement - this statement is at the bottom of the Canvas module.

translate scratch x to canvas

Convert Scratch's x-coordinates to Canvas's x-coordinates

Property	Description	Example Value
coordinates	Value of x coordinate	100

translate scratch y to canvas

Convert Scratch's y-coordinates to Canvas's y-coordinates

Property	Description	Example Value
coordinates	Value of y coordinate	100

translate canvas x to scratch

Convert Canvas's x-coordinates to Scratch's x-coordinates

Property	Description	Example Value
coordinates	Value of x coordinate	100

translate canvas y to scratch

Convert Canvas's y-coordinates to Scratch's y-coordinates

Property	Description	Example Value
coordinates	Value of y coordinate	100

clear by rectangle

Erase the content drawn on the canvas according to the shape of the rectangle

Property	Description	Example Value
coordinates	x coordinate of the starting point	100
coordinates	y coordinate of the starting point	100
size	Width	100
size	Height	100

clear by ellipse

Erase the content drawn on the canvas by following the shape of the circle

Property	Description	Example Value
coordinates	Value of x coordinate	100
coordinates	Value of y coordinate	100
size	Value of radius	100

set transparent

Set transparency

Property	Description	Example Value
value	Value of transparency	50

set color

Set the color of the pen

Property	Description	Example Value
color	Color setting by color, saturation, brightness You can also take color directly	See the picture below

set pen color of fill

Set the fill color of the pen

Property	Description	Example Value
Filling method	There are three options: - fill: Filled color - stroke: The color of the stroke - fill and stroke: The color of the fill and stroke.	fill
color	Color setting by color, saturation, brightness You can also take color directly	See the picture below

set fill mode on

Controls whether the drawn closed graph is filled or not

Property	Description	Example Value
switch	There are two options: - on: Complete the fill for the next drawn closed shapes - off: Not Complete the fill for the next drawn closed shapes	on

set line width

Set the width of the pen line

Property	Description	Example Value
value	the width of the pen line	10

set line cap

Set the shape of the thread

Property	Description	Example Value
shape	There are two options: - round: Round wire head - butt: Square wire head	round

draw a point

Draw a point at the specified location

Property	Description	Example Value
coordinates	Value of x coordinate	100
coordinates	Value of y coordinate	100

draw a line

Specify the starting and ending positions and draw a line

Property	Description	Example Value
coordinates	x coordinate of the starting point	0
coordinates	y coordinate of the starting point	0
coordinates	x coordinate of the end point	100
coordinates	y coordinate of the end point	100

draw a rectangle

Draw a rectangle

Property	Description	Example Value
coordinates	x coordinate of the starting point	100
coordinates	y coordinate of the starting point	100
size	Width	100
size	Height	100

Using this code below, you can get such a graph.

draw a triangle

Specify the position of the three top corners and draw a triangle

Property	Description	Example Value
coordinates	Value of the first angle x-coordinate	50
coordinates	Value of the first angle y-coordinate	50
coordinates	Value of the second angle x-coordinate	50
coordinates	Value of the second angle y-coordinate	100
coordinates	Value of the third angle x-coordinate	100
coordinates	Value of the third angle y-coordinate	50

draw a circle

Specify the position of the center and the length of the radius to draw a circle

Property	Description	Example Value
coordinates	Value of x coordinate	200
coordinates	Value of y coordinate	200
size	Value of radius	100

draw a bezier

Draw a Bezier curve

Property	Description	Example Value
coordinates	x coordinate of the starting point	170
coordinates	y coordinate of the starting point	120
coordinates	x coordinate of the end point	150
coordinates	y coordinate of the end point	230
coordinates	Value of the first control point x-coordinate	110
coordinates	Value of the first control point y-coordinate	80
coordinates	Value of the second control point x-coordinate	90
coordinates	Value of the second control point y-coordinate	260

The figure below illustrates the schematic diagram of the Bezier curve, with the start and end points in blue and the control points in red.

Using this code below, you can get a pink heart.

draw Text

Draw text from the specified position

Property	Description	Example Value
text	content	Hello Gandi
coordinates	The x-coordinate value of the plotted position	240
coordinates	The y-coordinate value of the plotted position	180

draw text and fill

Start drawing text from the specified position and set the fill method

Property	Description	Example Value
text	content	Hello Gandi
coordinates	The x-coordinate value of the plotted position	240
coordinates	The y-coordinate value of the plotted position	180
Filling method	There are three options: - fill: Filled color - stroke: The color of the stroke - fill and stroke: The color of the fill and stroke.	fill

set font size

Set the size of the font

Property	Description	Example Value
size	Value of font size	12

set font

Set the font

Property	Description	Example Value
font	Various fonts are available here as parameters. Founder Dali, Drymap Hare, Pixel ...…	Pixel

auto render

Enable synchronous drawing function

Property	Description	Example Value
switch	There are two options: - on: Enable synchronous drawing function - off: Turn off synchronized drawing	on

render to stage

Draw content to the stage area

beginPath

Mark the starting point for the pen to start drawing the path

closePath

Make the path drawn by the pen close up

move to

Make the pen move to the specified position

Property	Description	Example Value
coordinates	The x-coordinate value of the plotted position	100
coordinates	The y-coordinate value of the plotted position	100

line to

Make the pen draw a line to the specified position

Property	Description	Example Value
coordinates	The x-coordinate value of the plotted position	100
coordinates	The y-coordinate value of the plotted position	100

anticlockwise draw arc

Specify the position of the center of the circle, the length of the radius, the start and end of the arc, and the drawing direction to draw an arc.

Property	Description	Example Value
Drawing direction	There are two options: - anticlockwise: Plot anticlockwise - clockwise: Plot clockwise	anticlockwise
coordinates	Value of x coordinate	200
coordinates	Value of y coordinate	200
size	Value of radius	100
value	The value of the radian	0
value	The value of the radian	1

clip

Clip the content

stroke

Depicting the border

fill

Complete filling of closed shapes

get text width

Get the text rendering width

Property	Description	Example Value
text	content	Hello Gandi

scale width height

Scaling the width and height of the canvas

Property	Description	Example Value
value	Scaling of width	50
value	Scaling of height	50

rotate

Rotates the canvas by a specified angle

Property	Description	Example Value
value	Value of angle	120

translate

Offset the canvas to the specified position

Property	Description	Example Value
coordinates	Value of x coordinate	100
coordinates	Value of y coordinate	100

transform

Make the canvas transform in the specified way

Property	Description	Example Value
value	Value of horizontal scaling	1.5
value	Value of vertical tilt	1.5
value	Value of horizontal tilt	1.5
value	Value of vertical scaling	1.5
value	Value of horizontal movement	1.5
value	Value of vertical movement	1.5

clear transform

Clear canvas transform matrix effect

save

Save the current state of the canvas

restore

Restore to the last saved canvas state

draw from canvas stage at

Draw the stage or canvas data of a character to the specified location

Property	Description	Example Value
sprite name	There are at least one options: - stage: the stage - sprite name: The name of the character in the current project	stage
coordinates	Value of x coordinate	100
coordinates	Value of y coordinate	100

set composite mode

Set different synthesis modes

Property	Description	Example Value
sprite name	There are many modes as options: sourece-over、sourece-in、sourece-out……	sourece-over

reset

Reset all settings of canvas and pen

Roadmap and Logs

Version	Description
2.0	Added a little more functionality. 1. more drawing statements
1.0	Initial version 1. Basic drawing statement