De nuevo jugando un poco con los parámetros aprendidos anteriormente. Veo un FPS en camino. Gracias!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Canvas JS</title>
</head>
<body>
<style>
body {
margin: 0;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.canvas-1 {
position: relative;
width: 600;
height: 400px;
border: 4px solid #f4a127;
border-radius: 15px;
}
</style>
<div class="container">
<canvas class="canvas-1" width="600" height="400"> </canvas>
</div>
<script>
// vinculación
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
// color y tamaño de borde y relleno
brush.fillStyle = "#5A3D2B";
brush.fillRect(0, 0, 600, 400);
// FUNCIONES ------------>
function drawText(x, y, texto) {
var screen = document.querySelector("canvas");
var brush = screen.getContext("2d");
// parametros texto
brush.font = "italic bold 21px monospace";
brush.fillStyle = "bisque";
brush.fillText(texto, x, y);
}
function drawCircle(event) {
var x = event.pageX - screen.offsetLeft;
var y = event.pageY - screen.offsetTop;
brush.fillStyle = "#75C8AE"; /* color del circulo */
brush.beginPath(); /* comenzar herramienta trazo */
brush.arc(x, y, 20, 0, Math.PI * 2); /* definir medidas de cículo */
brush.fill(); /* aplicar relleno y color establecido */
console.log(x + "," + y);
console.log(event);
}
// INTERACTIVOS --------------->
drawText(200, 200, "pícale! pícale!"); // dibujar texto en canvas
screen.onclick = drawCircle; // dibujar círculo establecido en canvas
</script>
</body>
</html>
