Skip to content

Instantly share code, notes, and snippets.

@parzibyte

parzibyte/index.html

Created July 16, 2019 23:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save parzibyte/582dd6ef76b66a5f322311fb8aac7fbd to your computer and use it in GitHub Desktop.
Save parzibyte/582dd6ef76b66a5f322311fb8aac7fbd to your computer and use it in GitHub Desktop.
Download ZIP
Dibujar cuadrado en Canvas - JavaScript
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Cuadrado con canvas</title>
</head>
<body>
<h1>Cuadrado con canvas y JavaScript</h1>
<a href="//parzibyte.me/blog">By Parzibyte</a>
<br>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
/**
* Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
*
* https://parzibyte.me/blog
*/
const ALTURA_CANVAS = 200,
ANCHURA_CANVAS = 400;
// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#F4511E";
// Dibujamos un rectángulo con lados iguales
contexto.rect(5, 5, 100, 100);
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment