CODEWITHSUNDEEP
javascripthtmlimagehtml5-canvaskineticjs
Tony Dinh
Tony Dinh

Reputation: 6726

Convert HTML5 canvas to IMG element

I would like to resize, stretch an HTML5 canvas in a way that the canvas act like an IMG element: set width-height by pixel, percent...

I wonder if is there any way to convert/export an HTML5 canvas to an IMG element, or any way that can make this possible directly on the canvas.

HTML5 CANVAS resize acting like IMG

I'm using KineticJS library, for details.

Please help!

Upvotes: 17

Views: 33788

Answers (1)

federicot
federicot

Reputation: 12341

First, give your canvas an id (e.g. example). Then, using plain JavaScript you can create an image based on that canvas and style it:

var canvas = document.getElementById('example'),
    dataUrl = canvas.toDataURL(),
    imageFoo = document.createElement('img');
imageFoo.src = dataUrl;

// Style your image here
imageFoo.style.width = '100px';
imageFoo.style.height = '100px';

// After you are done styling it, append it to the BODY element
document.body.appendChild(imageFoo);

Upvotes: 30

Related Questions