Hello I want to know how can I make the canvas shape circle in the below code. The code is about moving a object with keyboard keys. I tried to make the circle out of this box but it just disappeared and i am not really sharp. Can some help me make this canvas circle without affecting code.
sorry but i have to write something more because SO says body has all code… i don’t know what to say now (make the canvas circle)(make the canvas circle)(make the canvas circle)
JavaScript
x
110
110
1
<!DOCTYPE html>2
<html>3
<head></head>4
<body>5
<canvas id="myCanvas" width='800' height='800' border-radius= ></canvas>6
</body>7
</html>8
<script>9
var canvas = document.getElementById('myCanvas');10
var context = canvas.getContext('2d');11
var centerX = canvas.width / 2;12
var centerY = canvas.height / 2;13
var radius = 70;14
15
let circle = new Path2D(); // <<< Declaration16
circle.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);17
18
context.fillStyle = 'lightblue';19
context.fill(circle); // <<< pass circle to context20
21
context.lineWidth = 10;22
context.strokeStyle = '#000066';23
context.stroke(circle); 24
25
26
27
28
(function() {29
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||30
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;31
window.requestAnimationFrame = requestAnimationFrame;32
})();33
34
//event listener35
window.addEventListener("keydown", onKeyDown, false);36
window.addEventListener("keyup", onKeyUp, false);37
38
function onKeyDown(event) {39
var keyCode = event.keyCode;40
switch (keyCode) {41
case 68: //d42
keyD = true;43
break;44
case 83: //s45
keyS = true;46
break;47
case 65: //a48
keyA = true;49
break;50
case 87: //w51
keyW = true;52
break;53
}54
}55
56
function onKeyUp(event) {57
var keyCode = event.keyCode;58
59
switch (keyCode) {60
case 68: //d61
keyD = false;62
break;63
case 83: //s64
keyS = false;65
break;66
case 65: //a67
keyA = false;68
break;69
case 87: //w70
keyW = false;71
break;72
}73
}74
75
//neccessary variables76
var tickX = 10;77
var tickY = 10;78
79
var keyW = false;80
var keyA = false;81
var keyS = false;82
var keyD = false;83
84
//main animation function85
function drawStuff() {86
window.requestAnimationFrame(drawStuff);87
var canvas = document.getElementById("myCanvas");88
var c = canvas.getContext("2d");89
90
c.clearRect(0, 0, 800, 800);91
c.fillStyle = "lightblue";92
c.fillRect(tickX, tickY, 100, 100);93
94
if (keyD == true) {95
tickX += 1;96
}97
if (keyS == true) {98
tickY += 1;99
}100
if (keyA == true) {101
tickX--;102
}103
if (keyW == true) {104
tickY--;105
}106
}107
window.requestAnimationFrame(drawStuff);108
</script>109
110
Advertisement
Answer
I moved the circle code into the drawstuff function as that is where it has to run, and removed the use of fillRect.
You can see the result here:
JavaScript
1
87
87
1
(function() {2
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||3
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;4
window.requestAnimationFrame = requestAnimationFrame;5
})();6
7
//event listener8
window.addEventListener("keydown", onKeyDown, false);9
window.addEventListener("keyup", onKeyUp, false);10
11
function onKeyDown(event) {12
var keyCode = event.keyCode;13
switch (keyCode) {14
case 68: //d15
keyD = true;16
break;17
case 83: //s18
keyS = true;19
break;20
case 65: //a21
keyA = true;22
break;23
case 87: //w24
keyW = true;25
break;26
}27
}28
29
function onKeyUp(event) {30
var keyCode = event.keyCode;31
switch (keyCode) {32
case 68: //d33
keyD = false;34
break;35
case 83: //s36
keyS = false;37
break;38
case 65: //a39
keyA = false;40
break;41
case 87: //w42
keyW = false;43
break;44
}45
}46
47
//neccessary variables48
var tickX = 10;49
var tickY = 10;50
51
var keyW = false;52
var keyA = false;53
var keyS = false;54
var keyD = false;55
56
//main animation function57
function drawStuff() {58
window.requestAnimationFrame(drawStuff);59
var canvas = document.getElementById("myCanvas");60
var c = canvas.getContext("2d");61
62
c.clearRect(0, 0, 200, 200);63
64
let circle = new Path2D(); // <<< Declaration65
circle.arc(100 + tickX, 100 + tickY, 70, 0, 2 * Math.PI, false);66
67
c.fillStyle = 'purple';68
c.fill(circle); // <<< pass circle to context69
70
c.lineWidth = 10;71
c.strokeStyle = '#000066';72
c.stroke(circle); 73
74
if (keyD == true) {75
tickX += 1;76
}77
if (keyS == true) {78
tickY += 1;79
}80
if (keyA == true) {81
tickX--;82
}83
if (keyW == true) {84
tickY--;85
}86
}87
window.requestAnimationFrame(drawStuff);JavaScript
1
2
1
Focus this area, then use keys <b>d, s, a, w</b><br />2
<canvas id="myCanvas" width='200' height='200' style="border: 1px solid #f4f4f4" ></canvas>