Estou tentando duplicar um triangulo aleatoriamente dentro do canvas quando pressiona alguma tecla, tipo, barra de espaço ou outra qualquer. Mas não sei como fazer para duplicar, se tenho que usar algum tipo de constructor/array
.
Ate o momento so tenho o canvas e o triangulo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<script src="canvas.js" type="text/javascript" defer></script>
</head>
<body onload="setUp()">
<h1>Triangle</h1>
<canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"></canvas>
<br>
<button type="button" id="resetbtt" name="button">Reset</button>
</body>
</html>
JS:
let canvas;
let ctx;
let dx = 10;
let dy = 10;
let x = 250;
let y = 250;
let WIDTH, HEIGHT = 500;
function setUp(){
canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d");
let resetbtt = document.getElementById('resetbtt');
drawTriangle();
}
function drawTriangle(){
ctx.save();
ctx.translate(x,y)
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(-15, 15);
ctx.lineTo(15, 15);
ctx.closePath();
ctx.stroke();
ctx.restore();