You already know how to draw a ball from working through the previous article, so now let’s make it move. Technically, we will be painting the ball on the screen, clearing it and then painting it again in a slightly different position every frame to make the impression of movement — just like how movement works with the movies.
Canvas moveTo() Method
Begin a path, move to position 0, 0. Create a line to position 300, 150:
const canvas = document.getElementById(“myCanvas”);
const ctx = canvas.getContext(“2d”);
// Start a new Path
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(300, 150);
// Draw the Path
ctx.stroke();
| context.moveTo(x, y) |
| Param | Description | Play it |
|---|---|---|
| x | The x-coordinate of where to move the path to | Play it » |
| y | The y-coordinate of where to move the path to | Play it » |
| NONE |
Browser Support
The element is an HTML5 standard (2014).
moveTo() is supported in all modern browsers:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Yes | Yes | Yes | Yes | Yes | 9-11 |
❮ Canvas Reference
COLOR PICKER
Defining a drawing loop
To keep constantly updating the canvas drawing on each frame, we need to define a drawing function that will run over and over again, with a different set of variable values each time to change sprite positions, etc. You can run a function over and over again using a JavaScript timing function such as setInterval() or requestAnimationFrame() .
Delete all the JavaScript you currently have inside your HTML file except for the first two lines, and add the following below them. The draw() function will be executed within setInterval every 10 milliseconds:
function draw() // drawing code > setInterval(draw, 10);
Thanks to the infinite nature of setInterval the draw() function will be called every 10 milliseconds forever, or until we stop it. Now, let’s draw the ball — add the following inside your draw() function:
.beginPath(); ctx.arc(50, 50, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath();
Try your updated code now — the ball should be repainted on every frame.
Making it move
You won’t notice the ball being repainted constantly at the moment, as it’s not moving. Let’s change that. First, instead of a hardcoded position at (50,50) we will define a starting point at the bottom center part of the Canvas in variables called x and y , then use those to define the position the circle is drawn at.
First, add the following two lines above your draw() function, to define x and y :
let x = canvas.width / 2; let y = canvas.height - 30;
Next update the draw() function to use the x and y variables in the arc() method, as shown in the following highlighted line:
function draw() ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); >
Now comes the important part: we want to add a small value to x and y after every frame has been drawn to make it appear that the ball is moving. Let’s define these small values as dx and dy and set their values to 2 and -2 respectively. Add the following below your x and y variable definitions:
let dx = 2; let dy = -2;
The last thing to do is to update x and y with our dx and dy variable on every frame, so the ball will be painted in the new position on every update. Add the following two new lines indicated below to your draw() function:
function draw() ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); x += dx; y += dy; >
Save your code again and try it in your browser. This works OK, although it appears that the ball is leaving a trail behind it:
Clearing the canvas before each frame
The ball is leaving a trail because we’re painting a new circle on every frame without removing the previous one. Don’t worry, because there’s a method to clear canvas content: clearRect() . This method takes four parameters: the x and y coordinates of the top left corner of a rectangle, and the x and y coordinates of the bottom right corner of a rectangle. The whole area covered by this rectangle will be cleared of any content previously painted there.
Add the following highlighted new line to the draw() function:
function draw() ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.arc(x, y, 10, 0, Math.PI * 2); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath(); x += dx; y += dy; >
Save your code and try again, and this time you’ll see the ball move without a trail. Every 10 milliseconds the canvas is cleared, the blue circle (our ball) will be drawn on a given position and the x and y values will be updated for the next frame.
How can I just select a portion of a drawing and move it across the canvas?
Hello, I need help but I cannot seem to be able to find the right words to search for an answer so I am asking here: How can I select only a section of a drawing and move it / drag it, without leaving half of the selection behind and being able to continue to draw afterward. English is not my first language but I just want to be able to move something I selected without problems.
When I am in the composition stage it would make things so much easier and It must be possible in ArtRage if a basic app like Ibis can .
I use Artrage 6 the full version I suppose ? on window 10 I use a waccom intuos 2015.
Last edited by m-lamer; 01-21-2022 at 11:39 AM .
01-21-2022 #2
Senior Member
Join Date Nov 2011 Posts 2,122
Hello m-lamer and welcome to the ArtRage forums
If you want to move/adjust just a part of an individual Layer;
1: Make sure the correct layer is selected in the Layers Panel.
2: Use the Selection tool to isolate the area of the layer you wish to alter.
3: Now switch to the Transform Tool, found in the Menu/Tool Bar at the top of the User Interface, and click once with it inside the area you selected.
This will bring up the Transform Panel and the selected area will now have a bounding box with control points around it.
Use the control points of the bounding box in combination with the different options found in the Transform panel to; Move, Scale, Rotate, Flip, Skew the selection.
When ready, click the tick box in the bottom right corner of the Transform panel, or hit the Return key, to confirm the transformation.
To transform all the content of any given layer you have two options;
1: In the Layers Panel, Right Click on the layer and choose; Transform Layer Contents… to activate the Transform panel.
Or;
2: With the target layer select in the Layers Panel, click once with the Transform Tool anywhere on the Canvas.
In addition to the Transform tool there is also the Warp tool which can be used for pushing/pulling paint around.
It can be activated by going to; Edit > Filters > Warp…
Last edited by markw; 01-21-2022 at 12:33 PM .
Maker Of Replica Macoys
Techie Stuff:
ArtRage Vitae 7.1.4 ~ 15″ Macbook Pro ~ macOS 10.15.7 ~ 4 Core i7 3.1GHz CPU ~ 16GB RAM ~ Wacom Intuos4 M
My Animal Paintings In The Forum Gallery
On Instagram
01-21-2022 #3
Junior Member
Join Date Jan 2022 Posts 2
Originally Posted by markw
Hello m-lamer and welcome to the ArtRage forums
If you want to move/adjust just a part of an individual Layer;
1: Make sure the correct layer is selected in the Layers Panel.
2: Use the Selection tool to isolate the area of the layer you wish to alter.
3: Now switch to the Transform Tool, found in the Menu/Tool Bar at the top of the User Interface, and click once with it inside the area you selected.
This will bring up the Transform Panel and the selected area will now have a bounding box with control points around it.
Use the control points of the bounding box in combination with the different options found in the Transform panel to; Move, Scale, Rotate, Flip, Skew the selection.
When ready, click the tick box in the bottom right corner of the Transform panel, or hit the Return key, to confirm the transformation.
To transform all the content of any given layer you have two options;
1: In the Layers Panel, Right Click on the layer and choose; Transform Layer Contents� to activate the Transform panel.
Or;
2: With the target layer select in the Layers Panel, click once with the Transform Tool anywhere on the Canvas.
In addition to the Transform tool there is also the Warp tool which can be used for pushing/pulling paint around.
It can be activated by going to; Edit > Filters > Warp�
