canvas javascript

JavaScript: Dibujar elipse y media elipse sobre Canvas

Hemos estado haciendo varios trazos y figuras geométricas con Canvas y JavaScript. Hicimos líneas, dibujamos texto, triángulos, cuadrados, círculos y otras figuras variadas.

Hoy vamos a terminar esta serie de tutoriales viendo cómo dibujar una elipse en JavaScript a través de la función ellipse.

También vamos a ver cómo dibujar media elipse y cómo rotar a la misma.

Leer más »JavaScript: Dibujar elipse y media elipse sobre Canvas

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:

  1. Rombo
  2. Romboide
  3. Trapecio
  4. Trapezoide
  5. Pentágono
  6. Hexágono
  7. 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.

Leer más »Dibujar figuras geométricas en Canvas con JavaScript

Dibujar curvas en Canvas usando JavaScript

El elemento canvas de JavaScript tiene un gran soporte para dibujar formas. Por ejemplo, podemos dibujar líneas o curvas cuadráticas.

En este post te voy a mostrar cómo dibujar curvas de Bézier en JavaScript (o bueno, sobre un canvas) a través del método bezierCurveTo.

Nota: este tipo de curva tiene dos puntos de apoyo, si quieres una curva más simple utiliza el método quadraticCurveTo.

Leer más »Dibujar curvas en Canvas usando JavaScript

Curva cuadrática de Bézier – Canvas en JavaScript

En este post te voy a mostrar un ejemplo de cómo dibujar o trazar una curva cuadrática de Bézier en un canvas de HTML5 usando JavaScript a través del método quadraticCurveTo.

Recuerda que una curva de Bézier tiene un inicio, un final y un punto de apoyo que define cómo será la curvatura.

Más adelante veremos el método que utiliza dos puntos de apoyo, igualmente con la curva de Bézier.

Leer más »Curva cuadrática de Bézier – Canvas en JavaScript

Convertir canvas a imagen PNG para descargarla

Los elementos canvas son algo muy útil en HTML, son un lienzo en donde se pueden dibujar varias cosas.

Al generar un contenido en un canvas el mismo puede ser descargado por el usuario, ¿pero qué pasa si queremos agregar más funcionalidad y agregar un botón para descargar el elemento como imagen?

Precisamente eso veremos hoy: cómo convertir el contenido de un canvas a una imagen PNG y hacer que la misma se descargue, usando JavaScript.

Leer más »Convertir canvas a imagen PNG para descargarla