<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <canvas id="myCanvas" width="800" height="350"></canvas> </div> </div>

body{ background: #ddd; } #myCanvas{ margin: 10px auto; background: #444; border: thin inset #000000; }

$(window).load(function() { var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); context.font = "38pt Arial"; context.fillStyle = "cornflowerblue"; context.strokeStyle = "blue"; function drawCircle(e){ var loc = windowtoCanvas(canvas, e.clientX, e.clientY); console.log(loc); context.beginPath(); context.fillStyle = "#ffffff"; context.strokeStyle = "#125512"; context.lineWidth = 1; context.arc(loc.x, loc.y, randRange(10, 24), 0, Math.PI*2); context.fill(); context.stroke(); } function windowtoCanvas(canvas, x, y){ var bbox = canvas.getBoundingClientRect(); return{x: x- bbox.left*(canvas.width/bbox.width), y: y - bbox.top*(canvas.height/bbox.height) } } function randRange(min, max){ return Math.floor(Math.random()*(max - min +1)) + min; } canvas.addEventListener("mousemove", drawCircle); });