Monday, June 3, 2024
 Popular · Latest · Hot · Upcoming
30
rated 0 times [  33] [ 3]  / answers: 1 / hits: 31495  / 11 Years ago, fri, august 2, 2013, 12:00:00

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



I'm using KineticJS library, for details.



Please help!


More From » html

 Answers
82

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

[#76582] Thursday, August 1, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
khalidkendelld

Total Points: 55
Total Questions: 99
Total Answers: 77

Location: South Korea
Member since Tue, Feb 22, 2022
2 Years ago
;