Scatter chart with html canvas

Question

I currently have many html elements, as well as jQuery and css, to create a dot pattern that affects mouse movement. It is difficult to explain, so I gave an example. http://jsfiddle.net/sebastianscholten/u6ebt390/

var mX, mY, distance; function theDistance(elem, mouseX, mouseY) { return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left+(elem.width()/2)), 2) + Math.pow(mouseY - (elem.offset().top+(elem.height()/2)), 2))); } $(document).mousemove(function(e) { mX = e.pageX; mY = e.pageY; cutoff = 100; $('.element').each(function(){ distance = theDistance($(this), mX, mY); if (distance <= cutoff) { $(this).css('transform', 'scale(' + (distance*(1/cutoff)-1) + ')'); } else { $(this).css('transform', 'scale(0)'); } }); }); 

The problem is buggy performance, so I thought about making the same effect with the html canvas. I have no idea if this will work.

You guys know some other way to create the same effect without a lot of html elements. Thanks.

EDIT: Thanks markE for your answer. It helped me a lot. This is what I came up with.

 var c = document.getElementById("canvas"); var ctx = c.getContext("2d"); var circleRadius = 1; var circleMargin = 10; var canvasW = c.width; var canvasH = c.height; var $canvas = $("#canvas"); var canvasOffset = $canvas.offset(); var offsetX = canvasOffset.left; var offsetY = canvasOffset.top; var circleAmountX = canvasW / (circleRadius + (2 * circleMargin)); var circleAmountY = canvasH / (circleRadius + (2 * circleMargin)); function draw(mouseX, mouseY) { ctx.clearRect(0, 0, canvasW, canvasH); for (i = 0; i < circleAmountX + 1; i++) { for (k = 0; k < circleAmountY + 1; k++) { var x = i * (circleRadius + circleMargin * 2); var y = k * (circleRadius + circleMargin * 2); var dx = mouseX - x; var dy = mouseY - y; var inflation = 1; var inflationAmount = 6; var cutoff = 150; var distance = Math.sqrt(dx * dx + dy * dy); if (distance <= cutoff && distance > 0) { inflation = inflationAmount - (distance / ((cutoff / inflationAmount) + 2)); } else if (distance = 0) { inflation = inflationAmount; } ctx.beginPath(); ctx.arc(x, y, circleRadius * inflation, 0, 2 * Math.PI); ctx.fill(); ctx.closePath(); } } } draw(0, 0); $("#canvas").mousemove(function (e) { var mX = parseInt(e.clientX - offsetX); var mY = parseInt(e.clientY - offsetY); draw(mX, mY); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <canvas id="canvas" width=500 height=500></canvas> 

Answer 1

Yes, you can use canvas for better performance:

• Listen to mousemove events

• calculate the distance between the mouse and the center of the circle:

    var dx=mouseX-centerX; var dy=mouseY-centerY; var distance=Math.sqrt(dx*dx+dy*dy); 

• redraw the inflated / sleeping circle depending on how close the mouse is to the circle

Good luck with your project!

Here's a proof of the concept with 1 circle:

 var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var $canvas=$("#canvas"); var canvasOffset=$canvas.offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var cx=150; var cy=150; var radius=30; var inflation=.25; draw(); $("#canvas").mousemove(function(e){handleMouseMove(e);}); function draw(){ ctx.clearRect(0,0,canvas.width,canvas.height); ctx.beginPath(); ctx.arc(150,150,inflation,0,Math.PI*2); ctx.closePath(); ctx.fill(); ctx.stroke(); } function handleMouseMove(e){ e.preventDefault(); e.stopPropagation(); mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); var dx=mouseX-cx; var dy=mouseY-cy; var distance=Math.sqrt(dx*dx+dy*dy); if(distance<radius){ inflation=radius; }else if(distance<50){ inflation=radius*.75; }else if(distance<75){ inflation=radius*.50; }else{ inflation=radius*.25; } draw(); } 

 body{ background-color: ivory; } #canvas{border:1px solid red;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <h4>Approach the circle with the mouse</h4> <canvas id="canvas" width=300 height=300></canvas>