Draw Again in Canvas After Clear

Gamedev Canvas Content Kit

Commodity 02: Move the ball

You already know how to draw a brawl from working through the previous article, so now let's make it move. Technically, we volition be painting the ball on the screen, clearing information technology then painting it again in a slightly different position every frame to make the impression of motility — just similar how movement works with the movies.

Defining a drawing loop

To keep constantly updating the sail cartoon on each frame, nosotros need to ascertain a cartoon function that will run over and once again, with a different set of variable values each time to change sprite positions, etc. Yous tin can run a function over and over 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 2 lines, and add the following below them. The draw() function will be executed within setInterval every ten miliseconds:

function draw() {     // cartoon code } setInterval(draw, ten);

Thanks to the inifinite nature of setInterval the draw() function volition be called every ten milliseconds forever, or until nosotros stop it. At present, allow's draw the ball — add the post-obit inside your draw() function:

ctx.beginPath(); ctx.arc(50, 50, 10, 0, Math.PI*two); ctx.fillStyle = "#0095DD"; ctx.fill(); ctx.closePath();      

Try your updated lawmaking now — the brawl should be repainted on every frame.

Making it move

You won't find the ball being repainted constantly at the moment, as information technology's non moving. Let's change that. Commencement, instead of a hardcoded position at (50,50) we will define a starting point at the bottom center part of the Canvas in variables chosen ten and y, then use those to ascertain the position the circle is fatigued at.

Starting time, add the following two lines higher up your draw() function, to define x and y:

var x = canvas.width/2; var y = canvas.height-30;      

Side by side update the depict() function to use the ten and y variables in the arc() method, as shown in the following highlighted line:

role draw() {     ctx.beginPath();     ctx.arc(x, y, 10, 0, Math.PI*2);     ctx.fillStyle = "#0095DD";     ctx.fill();     ctx.closePath(); }      

At present comes the important role: we want to add together a small value to x and y after every frame has been drawn to brand it appear that the ball is moving. Let's define these minor values as dx and dy and fix their values to two and -ii respectively. Add the following below your x and y variable definitions:

var dx = ii; var dy = -two;      

The last affair to do is to update ten and y with our dx and dy variable on every frame, so the brawl will be painted in the new position on every update. Add the following 2 new lines indicated below to your depict() function:

function draw() {     ctx.beginPath();     ctx.arc(x, y, ten, 0, Math.PI*ii);     ctx.fillStyle = "#0095DD";     ctx.fill up();     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 sheet before each frame

The ball is leaving a trail because we're painting a new circumvolve on every frame without removing the previous one. Don't worry, because there'southward a method to articulate canvas content: clearRect(). This method take 4 parameters: the ten and y coordinates of the summit 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 whatsoever content previously painted in that location.

Add together the post-obit highlighted new line to the draw() part:

role draw() {     ctx.clearRect(0, 0, sheet.width, canvas.pinnacle);     ctx.beginPath();     ctx.arc(x, y, 10, 0, Math.PI*2);     ctx.fillStyle = "#0095DD";     ctx.fill();     ctx.closePath();     ten += dx;     y += dy; }      

Salve your code and attempt over again, and this time you'll see the brawl move without a trail. Every 10 milliseconds the canvas is cleared, the blue circumvolve (our ball) will be fatigued on a given position and the x and y values volition exist updated for the next frame.

Cleaning up our code

We will be adding more and more commands to the depict() office in the adjacent few articles, so information technology'south good to keep it equally simple and make clean equally possible. Let's kickoff by moving the ball drawing code to a separate function.

Replace the existing draw() part with the post-obit two functions:

part drawBall() {     ctx.beginPath();     ctx.arc(x, y, x, 0, Math.PI*2);     ctx.fillStyle = "#0095DD";     ctx.fill();     ctx.closePath(); }  function depict() {     ctx.clearRect(0, 0, sail.width, canvas.height);     drawBall();     10 += dx;     y += dy; }

Compare your code

You can check the finished lawmaking for this article for yourself in the live demo beneath, and play with information technology to understand better how information technology works:

Do: try irresolute the speed of the moving brawl, or the direction it moves in.

Side by side steps

We've drawn our brawl and gotten it moving, but it keeps disappearing off the edge of the canvass. In the tertiary chapter we'll explore how to make information technology bounce off the walls.

greenerasideging.blogspot.com

Source: https://end3r.github.io/Gamedev-Canvas-Content-Kit/tutorial/article02.html

Share this post