Javascript Canvas

Question

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;">   </canvas>

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var currentx;
var currenty;
currentx=0;
currenty=200;

MoveRight();

I have functions that should update the canvas element and the global variables but they are not working. For instance my MoveRight function :

function MoveRight()
{

ctx.moveTo(currentx,currenty);
ctx.lineTo(currentx+40,currenty);
currentx=currentx+40;

}

I want my MoveRight function to draw a horizontal line every time it is called and update the global variables (currentx and currenty).

canvas is inside the html tags and the functions are inside the <script> </script>. — ayt_cem
– ayt_cem, Commented Feb 2, 2017 at 21:19

Dwadelfri · Accepted Answer · 2017-02-02 21:28:34Z

2

you have to stroke your line!

beginPath() will start and remeber what to draw, then stroke() to draw it. You can then use beginPath() to clear the stroke memory so the same line isn't drawn again.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var currentx;
var currenty;
currentx=0;
currenty=200;

MoveRight();

function MoveRight()
{
    ctx.beginPath();
    ctx.moveTo(currentx,currenty);
    ctx.lineTo(currentx+40,currenty);
    currentx=currentx+40;
    ctx.stroke();
}

<canvas id="myCanvas" width="200" height="200" style="border:1px solid #d3d3d3;"></canvas>
<button onclick="MoveRight();">Move right!</button>

edited Feb 2, 2017 at 21:28

answered Feb 2, 2017 at 21:19

Dwadelfri

4641 gold badge4 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Przemek Lewandowski · Accepted Answer · 2017-02-02 21:24:58Z

0

its just as @Dwadelfri says, I just wanted to say that you are doing the same operation two times

ctx.lineTo(currentx+40, currenty);
currentx = currentx + 40;

can be converted to

currentx += 40;
ctx.lineTo(currentx, currenty);

it's more readable and better quality this way

answered Feb 2, 2017 at 21:24

Przemek Lewandowski

4041 gold badge3 silver badges19 bronze badges

Collectives™ on Stack Overflow

Javascript Canvas

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related