Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
your very own self drawing draw!
<!DOCTYPE html>
<meta charset="utf-8"/>
<style type="text/css">
canvas { border: 1px solid black; }
<canvas id="canvas" onclick="draw(event)" style="margin:0;padding:0;" width="500" height="500"></canvas><br>
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<script type="text/javascript">
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canvas.width = img.width;
canvas.height = img.height;
img.src =;
function draw() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var pos = getMousePos(canvas, event);
ctx.lineTo(pos.x, pos.y);
ctx.strokeStyle = 'red';
function getMousePos(canvas, event) {
var rect = canvas.getBoundingClientRect();
return {
x: event.clientX - rect.left,
y: event.clientY -
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.