CODEWITHSUNDEEP
javascriptvue.js
Ilkar
Ilkar

Reputation: 2177

Vue how to draw picture and put next to another

i want to draw image next to another in this same div.

Generaly drawing works fine, but i have problem with placing one picture next to another.

Every time i draw image it is placend in this same div.

My HTML is:

<div id="thumbnailImages">
    <canvas
        id="thumbnailImage"
    />
  </div>

And code:

 function thumbnail(video) {
  const canvasThumbnail = document.getElementById('thumbnailImage')
  const cth = canvasThumbnail.getContext('2d')

  const data = video.slice(8)
  imgToHTML(data, e => {
    const drawingThumbnail = new Image()
    drawingThumbnail.src = e.target.result
    drawingThumbnail.onload = function () {
      canvasThumbnail.width = 128
      canvasThumbnail.height = 128
      cth.drawImage(drawingThumbnail, 0, 0)
      document.getElementById('thumbnails').appendChild(canvasThumbnail)
    }
  })
}

I would like to have many 'canvas' in 'thumbnailImages' id.

Can you help me?

Upvotes: 1

Views: 226

Answers (1)

Titulum
Titulum

Reputation: 11486

The issue is that you are reusing the same canvas over and over again. You need to create a new canvas to put next to it:

 function thumbnail(video) {
  const canvasThumbnail = document.createElement('canvas');
  const cth = canvasThumbnail.getContext('2d')

  const data = video.slice(8)
  imgToHTML(data, e => {
    const drawingThumbnail = new Image()
    drawingThumbnail.src = e.target.result
    drawingThumbnail.onload = function () {
      canvasThumbnail.width = 128
      canvasThumbnail.height = 128
      cth.drawImage(drawingThumbnail, 0, 0)
      document.getElementById('thumbnailImages').appendChild(canvasThumbnail)
    }
  })
}

Upvotes: 1

Related Questions