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/expo

Solution 1:

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);