Develop Reference

Intercept calls to HTML5 canvas element

I have a WEB application, that renders it's entire User Interface in an HTML5 canvas.
Note that I can't change the current application.
Currently, this application is being tested using Selenium.
This is done by simulating a click event at a given location in the browser window.
After the click has been executed, a sleep of 2 seconds is being performed to ensure that the entire UI is ready before moving to the next step.
Due to all the 'wait' statements, testing the application is very slow.
Therefore, I thought it was an idea to intercept all calls to the HTML5 canvas.
That way I can rely on the triggered events to know if the UI is ready to move to the next step.
Assume that I have the following code in my application that renders the canvas.
var canvas = document.getElementById("canvasElement");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
Is there a way to intercept the 'fillRect' event?
I tought something along the lines:
var canvasProxy = document.getElementById("canvasElement");
canvasProxy.addEventListener("getContext", function(event) {
console.log("Hello");
});
var canvas = document.getElementById("canvasElement");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);
Unforuntately this is not working.
I've created a JSFiddle to play with the example.
https://jsfiddle.net/5cknym74/4/
Amy toughts?

I played a bit around with the JS API and it seems that the following might be working:
// SECTION: Store a reference to all the HTML5 'canvas' element methods.
HTMLCanvasElement.prototype._captureStream = HTMLCanvasElement.prototype.captureStream;
HTMLCanvasElement.prototype._getContext = HTMLCanvasElement.prototype.getContext;
HTMLCanvasElement.prototype._toDataURL = HTMLCanvasElement.prototype.toDataURL;
HTMLCanvasElement.prototype._toBlob = HTMLCanvasElement.prototype.toBlob;
HTMLCanvasElement.prototype._transferControlToOffscreen = HTMLCanvasElement.prototype.transferControlToOffscreen;
HTMLCanvasElement.prototype._mozGetAsFile = HTMLCanvasElement.prototype.mozGetAsFile;
// SECTION: Patch the HTML5 'canvas' element methods.
HTMLCanvasElement.prototype.captureStream = function(frameRate) {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.captureStream');
return this._captureStream(frameRate);
}
HTMLCanvasElement.prototype.getContext = function(contextType, contextAttributes) {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.getContext');
console.log('PROPERTIES:');
console.log(' contextType: ' + contextType);
return this._getContext(contextType, contextAttributes);
}
HTMLCanvasElement.prototype.toDataURL = function(type, encoderOptions) {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.toDataURL');
return this._toDataURL(type, encoderOptions);
}
HTMLCanvasElement.prototype.toBlob = function(callback, mimeType, qualityArgument) {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.toBlob');
return this._toBlob(callback, mimeType, qualityArgument);
}
HTMLCanvasElement.prototype.transferControlToOffscreen = function() {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.transferControlToOffscreen');
return this._transferControlToOffscreen();
}
HTMLCanvasElement.prototype.mozGetAsFile = function(name, type) {
console.log('INTERCEPTING: HTMLCanvasElement.prototype.mozGetAsFile');
return this._mozGetAsFile(name, type);
}
Now that I can intercept the calls, I can find out which calls are responsible that draw a button and react accordingly.

Exporting canvas as GIF/PNG in p5js

I use Atom Editor. I want to make 20 seconds GIF with my canvas.
saveFrames() has a limitation(I guess). It enables to save .png files to short gifs(3-5 seconds), even if I type saveFrames("aa","png",15,22);
I discovered CCapture.js but I could not find any code example to export canvas.
It does not have to be exported as GIF; but I want to at least save .png snaps of
my animation in canvas limitlessly. How can I do it?
My animation code in p5.js:
var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;
function setup() {
createCanvas(600, 400);
background(0);
//saveFrames("aa","png",15,22);
}
function draw() {
stroke(random(100, 255), 0, random(100, 190));
strokeWeight(1.5);
ellipse(x, 100, d1, d1);
x = x + speed;
d1 = d1 - 0.6;
if (x > width || x < 0) {
speed = speed * -1;
fill(speed * 51);
}
ellipse(x, 300, d1, d1);
ellipse(x, 200, 50, 50);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>

I've been working on a new library which supports GIF exports, p5.createLoop.
This will run the sketch and then render a GIF at the same frame rate.
function setup() {
createCanvas(600, 400);
background(0);
frameRate(22)
createLoop({duration:15,gif:true})
}
Here's a codePen with the full example. It'll take about two minutes and is over 50MB, totally worth it

After a full day of research, surprizingly, I found a video uploaded youtube 2 weeks ago:
CCapture Video
Dont forget that CCapture exports (gif size=canvas sizex2).

>= 1.5.0
P5 has saveGif as of 1.5.0, which lets you write n seconds or frames to a downloadable gif. See the docs for usage.
< 1.5.0
I want to at least save .png snaps of my animation in canvas limitlessly. How can I do it?
You can do this directly in p5.js using save(`${name}.png`) after each frame you want to snap. This normally pops a dialog prompt asking you where you want to save the file, but you can disable this in browsers (as of 2021) so the images get automatically sent to the default download location.
For example, in Chrome (Version 92.0.4515.159 at the time of writing this post), navigate to chrome://settings/downloads and disable "Ask where to save each file before downloading":
With the prompt disabled, I found that p5.js's default framerate was too high for the browser to keep up with the downloads, so I added frameRate(4); to setup so that only 4 frames run per second. You can speed this up a bit depending on your needs and compute power, but some throttling helped give me a clean, sequential download of each of the frames into separate PNGs.
Clearly, this procedure isn't at all user-friendly (or particularly elegant). It's intended for turning your sketches into gifs yourself rather than an interface feature of a public-facing website. That said, the process does open up ideas for interactivity using buttons and other triggers for controlling the next frame to export in a creative way. You could use a button to start/stop the animation, for example, or programmatically determine specific conditions to emit the next frame.
Here's the two relevant lines added to your sketch. You'll want to run this locally rather than as a Stack snippet, which runs in a sandboxed frame that won't have download access:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js">
</script>
</head>
<body>
<script>
var x = 0;
var speed = 10;
var d1 = 100;
var d2 = 100;
function setup() {
createCanvas(600, 400);
background(0);
frameRate(4); // <-- feel free to adjust
}
function draw() {
stroke(random(100, 255), 0, random(100, 190));
strokeWeight(1.5);
ellipse(x, 100, d1, d1);
x = x + speed;
d1 = d1 - 0.6;
if (x > width || x < 0) {
speed = speed * -1;
fill(speed * 51);
}
ellipse(x, 300, d1, d1);
ellipse(x, 200, 50, 50);
save(`frame_${frameCount}.png`); // <--
}
</script>
</body>
</html>
Once you have the frames downloaded, you can use your favorite PNG -> GIF creator. I used ffmpeg as described here: ffmpeg -f image2 -framerate 60 -i frame_%d.png -loop 0 out.gif.
Here's the result on the first few frames of your sketch (scaled down 50% with ffmpeg's -vf scale=300x200 flag to keep bandwidth for this page reasonable):

Object under cursor not found

I tried three different approaches but none worked.
I place two rectangles on the canvas and want to catch the object under the mouse cursor when a mousedown event occurred.
The stagemousedown works, but the objects are not found. Watching the debugger I see that the rectangle has still the drawrect coordinates, not the one that I set later. There is also a 'hitarea' which I don't know how to use since it is checked during hittest and getObjectUnderPoint.
Approach 1: makeButton creates a handler on lines 66ff -> it never fires
Approach 2: getObjectUnderPoint when a mousedown evt happens. -> returns always null
Approach 3: loop through each child and apply the hitttest -> returns always false.
I come from Java and C# and am far from being experienced in JS, but I had hoped that I could catch the mousedown with at least one approach.
What makes me wonder is that the x and y in the rectangle never change from the ones used during creation (0,0). That's not the current position which I set for example in 73 and 74!
I don't seem to find the REAL x and y of the object and neither does approaches 2 and 3. I wished, approach 1 would work since that makes the most sense to me.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="./css/style.css">
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/1.0.2/easeljs.js"></script>
<script>
function init() {
var followme = 0;
var canvas = document.getElementById("canvas");
var stage=new createjs.Stage(canvas);
var shape=new createjs.Shape();
var dispO = new createjs.Shape();
makeBtn(3,3);
makeBtn(300,300);
stage.on("stagemousedown", function (evt) {
followme = 1;
found=stage.getObjectUnderPoint(stage.mouseX, stage.mouseY,0)
if(found != null)
{
console.log(found);
}
var xxx=stage.children;
for (i=0; i<xxx.length;i++)
{
if (xxx[i].hitTest(stage.mouseX, stage.mouseY))
{
shape.alpha=1;
}
}
});
stage.on("stagemouseup", function (evt) {
followme = 0;
});
stage.update();
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event)
{
if ((followme === 1) && (dispO != null))
{
var difX = stage.mouseX - dispO.x - 100;
var difY = stage.mouseY - dispO.y - 50;
dispO.x += difX / 20;
dispO.y += difY / 20;
stage.update();
}
else
if(dispO != null)
{
var dmy=dispO;
}
}
function makeBtn(x,y)
{
shape = new createjs.Shape();
shape.graphics.beginStroke("black").setStrokeStyle(2, 0, 1).drawRect(0, 0, 200, 100);
dispO=shape;
dispO.mouseEventsEnabled = true;
var handler=dispO.on("mousedown",
function(event) {console.log(instance == this); },// true, "on" uses dispatcher scope by default.
null,
once=true,
'theButton',
useCapture=true
);
dispO.x=x;
dispO.y=y;
stage.addChild(dispO);
}
}
</script>
</head>
<body onload="init();">
<div id="outer">
<canvas id="canvas" width="500" height="600">
</canvas>
<menu id="controls">
</menu>
</div>
</body>
</html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/EaselJS/1.0.2/easeljs.js"></script>

Your demo works fine -- its just that your square has no fill, so only the border is clickable. If you add a fill, then it works great:
https://jsfiddle.net/lannymcnie/ozcr6tna/
shape.graphics.beginStroke("black")
.setStrokeStyle(2, 0, 1)
.beginFill("white") // <----- Fill call
.drawRect(0, 0, 200, 100);
If you want the clickable area to be transparent, then you can use a hitArea. Just assign a different shape with a fill as a hitArea (and don't add that shape to the stage). Hit testing in EaselJS uses pixel fill - so if there are no pixels, then there is no hit!
Hope that helps!

setTimeout() not working in animation function | Animation not working

I'm trying to build a very simple animation function. I'm using this tutorial to build my project:
https://www.youtube.com/watch?v=hUCT4b4wa-8
The result after the button is clicked should be a green box moving across the page from left to right. When the button is clicked, nothing happens and I don't get any console errors.
Here's my fiddle:
https://jsfiddle.net/xkhpmrtu/7/
And here's a snippet of my code:
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<style type="text/css">
canvas {
border: 1px solid #666;
}
</style>
<script type="application/javascript" language="javascript">
function anim(x,y) {
var canvas = document.getElementById('canvas');//reference to canvas element on page
var ctx = canvas.getContext('2d');//establish a 2d context for the canvas element
ctx.save();//save canvas state if required (not required for the tutoriral anaimation, but doesn't hurt the script so it stays for now)
ctx.clearRect(0, 0, 550, 400);//clears the canvas for redrawing the scene.
ctx.fillStyle = "rgba(0,200,0,1)";//coloring the rectangle
ctx.fillRect = (x, 20, 50, 50);//drawing the rectangle
ctx.restore();//this restores the canvas to it's original state when we saved it on (at the time) line 18
x += 5; //increment the x position by some numeric value
var loopTimer = setTimeout('draw('+x+','+y+')', 2000);// setTimeout is a function that
</script>
</head>
<body>
<button onclick="animate(0,0)">Draw</button>
<canvas id="canvas" width="550" height="400"></canvas>
</body>
Any idea what I'm doing wrong?

I just had a look at the tutorial link. I will give if a major thumbs down as it demonstrates how not to animate and how not to do many other things in Javascript.
First the script tag and what is wrong with it
// type and language default to the correct setting for javascrip
// <script type="application/javascript" language="javascript">
<script>
function anim(x,y) {
// get the canvas once. Getting the canvas for each frame of an
// animation will slow everything down. Same for ctx though will not
// create as much of a slowdown it is not needed for each frame
// var canvas = document.getElementById('canvas');
// var ctx = canvas.getContext('2d');
// Dont use save unless you have to. It is not ok to add it if not needed
// ctx.save();
// dont use literal values, canvas may change size
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(0,200,0,1)";
// this line is wrong should be ctx.fillRect(x, 20, 50, 50). It is correct in the video
ctx.fillRect = (x, 20, 50, 50);//drawing the rectangle
// restore not needed
//ctx.restore();
x += 5; //increment the x position by some numeric value
// creating a string for a timer is bad. It invokes the parser and is slooowwwwww...
// For animations you should avoid setTimeout altogether and use
// requestAnimationFrame
// var loopTimer = setTimeout('draw('+x+','+y+')', 2000);
requestAnimationFrame(draw);
// you were missing the closing curly.
}
</script>
There is lots more wrong with the tut. It can be excused due to it being near 5 years old. You should look for more up todate tutorials as 5 years is forever in computer technology.
Here is how to do it correctly.
// This script should be at the bottom of the page just befor the closing body tag
// If not you need to use the onload event to start the script.
// define a function that starts the animation
function startAnimation() {
animating = true; // flag we are now animating
x = 10;
y = 10;
// animation will start at next frame or restart at next frame if already running
}
// define the animation function
function anim() {
if (animating) { // only draw if animating
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "red"; //coloring the rectangle
ctx.fillRect(x, y, 50, 50); //drawing the rectangle
x += xSpeed;
}
// set animation timer for next frame
requestAnimationFrame(anim);
}
// add a click listener to the start button. It calls the supplied function every time you click the button
startAnimButton.addEventListener("click", startAnimation);
const ctx = canvas.getContext('2d'); // get the 2d rendering context
// set up global variables to do the animation
var x, y, animating;
animating = false; // flag we are not animating
const xSpeed = 50 / 60; // Speed is 50 pixels per second at 60fps
// dont slow the animation down via frame rate
// slow it down by reducing speed.
// You only slow frame rate if the machine
// can not handle the load.
// start the animation loop
requestAnimationFrame(anim);
canvas {
border: 1px solid #666;
}
<!-- don't add events inline -->
<button id="startAnimButton">Draw</button>
<canvas id="canvas" width="512" height="128"></canvas>

Easel.js: Browser compatibility when placing an image within a container and adding mouse interactions

I'm going to start this question off by saying that this is 100% working in Firefox (v21.0). For some reason it's not working in Google Chrome (v27.0.1453.94m). It also doesn't work in IE10.
Here is the JavaScript code I'm having issues with:
function canvasDrawBackground(value){
console.log(value);
stage.removeChild(background);
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
background = new createjs.Container();
background.x = background.y = 0;
background.addChild(temp);
stage.addChild(background);
background.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
So, in Firefox the above code works, as in the image is added to the canvas and you can drag it around.
In Chrome / IE10 nothing happens - or more simply nothing appears on the canvas. I think the issue is in regards to when I add the image into the container, as I can place other items into the container and it works.
I am using http://code.createjs.com/easeljs-0.6.1.min.js and this code is based off of the "drag" tutorial. Here's the code from the tutorial:
<!DOCTYPE html>
<html>
<head>
<title>EaselJS demo: Dragging</title>
<link href="../../shared/demo.css" rel="stylesheet" type="text/css">
<script src="http://code.createjs.com/easeljs-0.6.0.min.js"></script>
<script>
var stage, output;
function init() {
stage = new createjs.Stage("demoCanvas");
// this lets our drag continue to track the mouse even when it leaves the canvas:
// play with commenting this out to see the difference.
stage.mouseMoveOutside = true;
var circle = new createjs.Shape();
circle.graphics.beginFill("red").drawCircle(0, 0, 50);
var label = new createjs.Text("drag me", "bold 14px Arial", "#FFFFFF");
label.textAlign = "center";
label.y = -7;
var dragger = new createjs.Container();
dragger.x = dragger.y = 100;
dragger.addChild(circle, label);
stage.addChild(dragger);
dragger.addEventListener("mousedown", function(evt) {
var offset = {x:evt.target.x-evt.stageX, y:evt.target.y-evt.stageY};
// add a handler to the event object's onMouseMove callback
// this will be active until the user releases the mouse button:
evt.addEventListener("mousemove",function(ev) {
ev.target.x = ev.stageX+offset.x;
ev.target.y = ev.stageY+offset.y;
stage.update();
});
});
stage.update();
}
</script>
</head>
<body onLoad="init();">
<canvas id="demoCanvas" width="500" height="200">
alternate content
</canvas>
</body>
</html>
To simulate my issue, change "var circle = new createjs.Shape();" into a bitmap / image, createjs.Bitmap("images/bg_" + value +".jpg");. It then doesn't render.
Any help is greatly appreciated! Hopefully I'm just doing it wrong. :P

This is probably because the image is not loaded. If you only update the stage after creating it, the image may not display. I would recommend adding a callback to the image to update the stage after its loaded.
// Simple approach. May not work depending on the scope of the stage.
var temp = new createjs.Bitmap("images/bg_" + value +".jpg");
temp.image.onload = function() { stage.update(); }
It also may make sense to preload the images you intend to use.