Skip to content

Instantly share code, notes, and snippets.

@gunesacar
Created June 18, 2015 22:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save gunesacar/f4447704d0c8f98f75e1 to your computer and use it in GitHub Desktop.
Save gunesacar/f4447704d0c8f98f75e1 to your computer and use it in GitHub Desktop.
<!doctype html>
<!-- Adapted from https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement -->
<html>
<head>
<title>toDataURL example</title>
<script type="application/javascript">
function draw_and_get() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
ctx.fillText("TEST-1234567890", 10, 50);
var data_url = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = data_url;
document.body.appendChild(newImg);
}
</script>
<style>
img, canvas{
border: 1px solid red;
}
</style>
</head>
<body onload="draw_and_get()">
<canvas id="canvas" width="100" height="100"></canvas>
</body></html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment