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