Dibujar arreglo en Canvas de JavaScript

En este artículo de programación te mostraré cómo pintar o dibujar un arreglo (array, vector, como lo conozcas) en un canvas de JavaScript, logrando hacer una cuadricula. Es decir, a partir de una matriz en JavaScript, dibujar una cuadricula en Canvas. Esto es útil por ejemplo al hacer un juego como snake, pues si tratamos todo como un arreglo, podemos desarrollar el juego en el mismo y luego solo pintar la matriz en el canvas. ...

noviembre 1, 2020 · 3 min · 616 palabras · Parzibyte

Solución a Immutable bitmap passed to canvas constructor en Android y Java

En este post te mostraré la solución a un problema de Android que dice así: E/AndroidRuntime: FATAL EXCEPTION: main Process: me.parzibyte.controldeentregas, PID: 4817 java.lang.IllegalStateException: Immutable bitmap passed to Canvas constructor at android.graphics.Canvas.<init>(Canvas.java:131) El error es muy claro: estamos pasando un bitmap inmutable al constructor de Canvas; hay que hacer el Bitmap mutable. ...

septiembre 11, 2019 · 1 min · 170 palabras · Parzibyte

Códigos de barras con JavaScript usando JSBarcode

Códigos de barras con JavaScript En este post te voy a mostrar algunos ejemplos y usos de la librería JsBarcode para generar códigos de barras en elementos HTML usando JavaScript. Vamos a generar códigos de barras con JavaScript en 3 elementos: SVG Canvas Imagen Si deseas mantener la calidad del código de barras, recomiendo que uses el formato SVG. Nota: esta librería no necesita otras librerías o dependencias, funciona con JavaScript puro y por lo tanto se puede usar en cualquier proyecto de JavaScript. ...

agosto 19, 2019 · 6 min · 1241 palabras · Parzibyte

Canvas y JavaScript: ejercicios, ejemplos y tutoriales

Esta es una recopilación de códigos de ejemplo para trabajar con el elemento canvas de HTML5 usando JavaScript. Se puede dibujar prácticamente cualquier cosa sobre un canvas, simplemente hay que declararlo y obtener una referencia a él desde JavaScript. ...

julio 17, 2019 · 1 min · 107 palabras · Parzibyte

Dibujar círculo y medio círculo en Canvas con JavaScript

En este post vamos a ver el uso de la función arc del contexto en un Canvas para poder dibujar círculos usando JavaScript. Esta función permitirá dibujar un círculo completo o un medio círculo. ...

julio 17, 2019 · 3 min · 570 palabras · Parzibyte

Dibujar cuadrado y rectángulo en Canvas usando JavaScript

En este post te voy a enseñar cómo usar la función rect del contexto de un canvas en JavaScript para dibujar dos figuras geométricas: Un cuadrado Un rectángulo También te voy a mostrar cómo personalizar el color de relleno y color de borde en cada una de las figuras. ...

julio 17, 2019 · 3 min · 469 palabras · Parzibyte

Dibujar figuras geométricas en Canvas con JavaScript

En este post recopilo algunos ejemplos de figuras geométricas dibujadas sobre un lienzo o canvas (elemento de HTML5) usando el lenguaje de programación JavaScript. Las figuras que veremos son: Rombo Romboide Trapecio Trapezoide Pentágono Hexágono Heptágono Nota: recuerda que ya vimos cómo dibujar triángulos, y también cómo dibujar rectángulos o cuadrados. Para dibujar las figuras vamos a unir unas simples líneas con lineTo. ...

julio 17, 2019 · 8 min · 1598 palabras · Parzibyte

Agregar texto a canvas - JavaScript y HTML5

Siguiendo con los tutoriales sobre el elemento canvas de HTML5 en este post vamos a ver cómo escribir texto sobre el canvas, o mejor dicho, dibujar texto sobre el canvas. Vamos a personalizar la fuente y el color, así como las coordenadas en donde el texto comienza. Los métodos que veremos son strokeText y fillText. ...

julio 16, 2019 · 2 min · 297 palabras · Parzibyte

Dibujar líneas en canvas - JavaScript y HTML5

En este post te voy a enseñar a dibujar líneas (de diferente color) en un elemento canvas de HTML usando los métodos moveTo y lineTo, además de cambiar el grosor de las mismas. Todo esto lo haremos con JavaScript y el elemento canvas de HTML. ...

julio 16, 2019 · 2 min · 396 palabras · Parzibyte

Convertir HTML a imagen con html2canvas - Tomar screenshot de página web

En este post voy a explicar y a dar algunos ejemplos para convertir el contenido de una página web a una imagen, es decir, tomarle una “captura de pantalla” a la página web usando únicamente JavaScript del lado del cliente y la maravillosa librería de html2canvas. Voy a mostrar cómo adjuntar el elemento canvas al documento, descargar la imagen, ignorar algunos elementos al tomar la captura de pantalla, respetar los estilos CSS y poner el resultado sobre un canvas existente. La imagen anterior fue generada por esta librería, respetando estilos de la tabla, imágenes, colores, fuentes y más. ...

julio 11, 2019 · 9 min · 1748 palabras · Parzibyte