Converting from Scratch's coordinates to the HTML canvas

scratch-coordinate-sums.js

// assumptions about the Scratch coordinate system
var SCRATCH_CANVAS_TOP = 180;
var SCRATCH_CANVAS_LEFT = -240;
var SCRATCH_CANVAS_RIGHT = 240;
var SCRATCH_CANVAS_WIDTH = SCRATCH_CANVAS_RIGHT - SCRATCH_CANVAS_LEFT;

// where is the top-left corner of the sprite we're interested in?
var costume = targetSprite.getCurrentCostume();
var scratchX = targetSprite.x - costume.rotationCenterX;
var scratchY = targetSprite.y + costume.rotationCenterY;

// how big is the sprite we're interested in?
var sizeRatio = targetSprite.size / 100;
var scratchWidth = costume.size[0] * sizeRatio;
var scratchHeight = costume.size[1] * sizeRatio;

// the size of the HTML canvas will vary depending on whether
//  the project is in full-screen mode or not, so we need
//  to know the scale factor to use
// (assume that it'll be the same for both width and height, so
//  we just pick one)
var scaleFactor = htmlCanvas.width / SCRATCH_CANVAS_WIDTH;

// where is the top-left corner of the sprite on the HTML canvas?
var htmlX = scaleFactor * ( scratchX + SCRATCH_CANVAS_RIGHT );
var htmlY = -scaleFactor * ( scratchY - SCRATCH_CANVAS_TOP );

// how big is the sprite on the HTML canvas?
var htmlWidth = scaleFactor * scratchWidth;
var htmlHeight = scaleFactor * scratchHeight;