Canfigurar HTML Canvas

Para comenzar con Canvas, necesitas utilizar la etiqueta HTML <canvas>. Luego dentro de la etiqueta podemos especificar ancho y largo del elemento, estas medidas deben ser especificadas en pixeles.

  
    <canvas id="my-canvas" width="400" height="200"><canvas>
  

Otra manera de configurar ancho y largo del elemento canvas es por medio de JavaScript.

  
    let canvas = document.getElementById('display')
    canvas.width  = 400
    canvas.height = 200
  

El elemento canvas es soportado por la mayoria de los exploradores de nueva generacion, pero existen ocasiones que no todos soportan. Como programadores debemos notificarle al usuario que su explorador necesita ser actualizado o de lo contrario no podran utilizar nuestra aplicacion con elementos canvas.

      
    <canvas id='display'>
      <!-- Browsers which not supported HTML5 canvas will display the content below -->
      Sorry, HTML5 Canvas is not supported in this browser!
    </canvas>
  

Cargar aplicacion de canvas

JavaScript necesita asegurar que todos los elemento de la aplicacion esten listo para ejecutar la aplicacion de manera satifactoria, es por esta razon que debemos crear esta verificacion de que todo este listo para ejecutar.

  
    const init = () => {
      let canvas = document.getElementById('display')
      canvas.width  = 400
      canvas.height = 200
      canvas.classList.add('display-400-200')
    }
    
    if(document.readyState !== 'loading') {
      init()
    } 
    else {
      document.addEventListener('DOMContentLoaded', init)
    }
  

Contenido Canvas (Canvas Context)

En el desarrollo de aplicaciones con Canvas es necesario tener un contenido canvas para poder dibujar. Esto es posible ya que el metodo getContext() nos devuelve el contenido del canvas el cual estamos trabajando. A este metodo se le puede pasar un parametro para especificar que tipo de contenido deseamos. Los parametros validos para este metodos son:

• 2d - Usado para canvas.
• webgl - Usado para graficas 3 dimensiones.
• webgl2 - Usado para graficas 3 dimensiones, segunda version.
• bitmaprenderer - Usado para ImageBitmap.

  
    const init = () => {
      let canvas = document.getElementById('display')
      canvas.width  = 400
      canvas.height = 200
      canvas.classList.add('display-400-200')
      
      let display = canvas.getContext('2d')
      display.fillRect(50, 50, 100, 100)
    }
    
    if(document.readyState !== 'loading') {
      init()
    }
    else {
      document.addEventListener('DOMContentLoaded', init)
    }
  

El origin de los puntos en canvas son x = 0 y y = 0. Estos punto se lee de la siguiente forma, izquierda tope del elemento canvas.

Dibujando un rectangulo

Canvas nos provee lo siguientes metodos para dibujar un rectangulo.

• fillRect(x, y, width, height) - LLenar un rectangulo comenzando en la posicion x, y con acho y largo.
• strokeRect(x, y, width, height) - LLenar el contorno de rectangulo comenzando en la posicion x, y con acho y largo.
• clearRect() - Borra el área especificada y la hace completamente transparente.

  
    const init = () => {
      let canvas = document.getElementById('display')
      canvas.width  = 400
      canvas.height = 200
      canvas.classList.add('display-400-200')
      
      let display = canvas.getContext('2d')
      display.fillRect(50, 50, 100, 100)
      display.strokeRect(200, 100, 50, 50)
    }
    
    if(document.readyState !== 'loading') {
      init()
    } 
    else {
      document.addEventListener('DOMContentLoaded', init)
    }
  

Propiedades de canvas

El objeto de contexto Canvas tiene propiedades, por ejemplo fillStyle y strokeStyle. Al dibujar formas rellenas, ingrese un código de color en la propiedad fillStyle, cambiará el estilo de las formas rellenas.

  
    const init = () => {
      let canvas = document.getElementById('display')
      canvas.width  = 400
      canvas.height = 200
      canvas.classList.add('display-400-200')
      
      let display = canvas.getContext('2d')
      display.fillStyle = '#FA293E'
      display.fillRect(50, 50, 100, 100)
      
      display.strokeStyle = '#F3E02F'
      display.strokeRect(200, 100, 50, 50)
    }
    
    if(document.readyState !== 'loading') {
      init()
    }
    else {
      document.addEventListener('DOMContentLoaded', init)
    }
  

Dibujar lineas y caminos

Todo lo que no sea rectangular que desee dibujar en Canvas debe crearse con una ruta. Una ruta o camino es una lista de puntos conectados por lineas rectas o curvas. Pueden ser abiertos o cerrados y cada segmento de la ruta puede tener un estilo diferente. Para hacer una forma usando ruta, hay tres pasos:

• Crea el camino
• Dibujar en el camino
• Trace o llenar el camino para representarlo.

Para hacer esto utilizamos los siguientes metodos que provee Canvas:

• beginPath() - Esto crea una nueva ruta
• moveTo(x, y) - Mueves la posicion de dibujo a la indicada por los punto x, y.
• lineTo(x, y) - Traza linea de punto inicial al indicado por el metodo.
• closePath() - Agrega una linea recta a la ruta entre la posicion actual y inicio.
• stroke() -
• fill() - Rellena de color la figura creada por las lineas.

  
    const backgroundScale = 'display-400-200'
    const removeScale = document.getElementById('removeScale')
    
    removeScale.addEventListener('click', function(event) {
      let canvas = document.getElementById('display')
      canvas.classList.toggle(backgroundScale)
    })
    
    const init = () => {
      let canvas = document.getElementById('display')
      canvas.width  = 400
      canvas.height = 200
      canvas.classList.add(backgroundScale)
      
      let display = canvas.getContext('2d')
      display.strokeStyle = '#FA293E'
      display.lineWidth = 2
      display.beginPath()
      display.moveTo(50, 50)
      display.lineTo(150, 50)
      display.lineTo(50, 150)
      display.closePath()
      display.stroke()
    }
    
    if(document.readyState !== 'loading') {
      init()
    }
    else {
      document.addEventListener('DOMContentLoaded', init)
    }