canvas text jitter animation
HTML
<canvas id="canvas1" width="500" height="300"></canvas>
CSS
#canvas1
{
background-color: white
}
JavaScript
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "bold 16px Helvetica";
ctx.shadowOffsetX = ctx.shadowOffsetY = 2;
ctx.shadowBlur = 6;
var bgColor="blue";
var textColor="white";
var shadowColor="rgba(0, 0, 0, 0.4)";
var radius=15;
//Draw empty plate for the pin, no text on top
//Problem: NONE, movements are smooth
function drawPinPlate(x, y)
{
var oldShadow = ctx.shadowColor;
ctx.shadowColor = shadowColor;
ctx.fillStyle = bgColor;
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2*Math.PI);
ctx.fill();
ctx.shadowColor = oldShadow;
}
//method 1: Draw pin with text directly.
//Draw text using canvas direct text rendering.
//Problem: Text vertical jittering while animating movement
function drawPin1(x, y, name)
{
drawPinPlate(x, y);
ctx.fillStyle = textColor;
ctx.fillText(name, x, y);
}
//method 2: Draw pin with text using offscreen image with resize
//Draw text using text pre-rendered to offscreen canvas.
//Offscreen canvas is twice large than the original and we do resize (shrink) to the original one
//Problem: Text is sharp but some flickering appears during image movement
function drawPin2(x, y, name)
{
drawPinPlate(x, y);
ctx.drawImage(offImage1, x - radius, y - radius, radius*2, radius*2);
}
//method 2: Draw pin with text using offscreen image
//Draw text using text pre-rendered to offscreen canvas.
//Offscreen canvas is the same size as the original.
//Problem: Text is looking fuzzy, blurry
function drawPin3(x, y, name)
{
drawPinPlate(x, y);
ctx.drawImage(offImage2, x - radius, y - radius);
}
var PIXEL_RATIO = (function ()
{
var ctx = document.createElement("canvas").getContext("2d"),
dpr = window.devicePixelRatio || 1,
bsr = ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
...