Canvas Data

Question

Hi, I want to know that how to take our canvas data and save it as an image? Thanks

Senthilkumar · Answer

Hi Arjun, you can save the canvas data into an image. window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // draw cloud context.beginPath(); // begin custom shape context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); // complete custom shape context.lineWidth = 5; context.fillStyle = "#8ED6FF"; context.fill(); context.strokeStyle = "#0000ff"; context.stroke(); // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // set canvasImg image src to dataURL // so it can be saved as an image document.getElementById("canvasImg").src = dataURL; }; Please refer these articles. http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/ http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Canvas Data

Insert Link

Embed YouTube Video

Table Options

Insert Image

Answers (1)