Develop Reference

Using Phaser for Babylonjs Dynamic Texture

I'm creating a 3d game using Babylon.js and saw that using Dynamic Texture (https://doc.babylonjs.com/how_to/dynamictexture) you can use canvas elements for the texture: var ctx = myDynamicTexture.getContext();. Is there some way to project a PhaserJS canvas onto a texture of a 3D element in Babylon.js? I know it can be done in three.js, but I like Babylon.js better and don'
t want to switch.

The second variable of the DynamicTexture constructor can be an already-existing canvas with 2d context (https://doc.babylonjs.com/how_to/dynamictexture#creating-and-applying-a-dynamic-texture). It will use the canvas's width and height to define the texture's size:
const phaserCanvas = getMyPhaserCanvas();
const dt = new DynamicTexture('phaser canvas', phaserCanvas, babylonScene);

Turning a canvas element into an image object

I have a primary canvas element which I perform drawing operations on using the context. I can successfully draw images, shapes, and also transform those objects using the context.
I now need my own textbox. I want to create another canvas, render the text to that canvas, then copy that data onto the primary canvas... the catch is I want to have it transformable, almost is if I was just calling the drawImage function.
There exists the getImageData and putImageData methods, but those do not work because it does not take into consideration the transformation.
I am looking for something like this...
var tempcanvas = document.createElement("canvas");
var ctx = tempcanvas.getContext('2d');
ctx.fillRect(0,0,5,5);
then on my primary canvas which I already have, I would like to draw that as if it were an image object.
context = maincanvas.getContext('2d');
context.translate(50,50);
context.rotate(180);
context.drawImage(tempcanvas)

How to draw image on 3d canvas using javascript

I have this
function doFirst(){
var x = document.getElementById('canvas');
var canvas = x.getContext('webgl') || x.getContext("experimental-webgl");
}
And I want to draw a image 'sheep.png' on the canvas. I use this but it is not working:
var pic = new Image();
pic.src = "images/sheep.png";
pic.addEventListener("load", function() { canvas.drawImage(pic,0,0,0)}, false);

drawImage is only for use with the 2D context, you can't use it in a webgl context.
In order to use it in webgl, you'll need to build a mesh with your image used as the texture.
If you're not familiar with webgl, you might want to look at three.js as an alternative that's easier to use.

drawImage()
takes only 3 arguments I guess.
See this demo.
and this reference

Fabricjs copy part of canvas to another canvas

I am trying to copy part of a fabricjs canvas to another canvas.I am not sure if fabric has a method suitable for doing it (please let me know if that's the case) and after some searching I decided to do it without using fabric. But the canvas was already created using fabricjs. new fabric.Canvas(). Now when I try to copy a part of this canvas using context.drawImage(), I get a TypeError. I tried replacing the canvas with a img or a canvas created without using fabric and that works. So, I am guessing I may have to use the fabric canvas object a bit differently.

If you want to copy a rectangular zone from the canvas in order to export it as an image you could use the following:
canvas.deactivateAll();
canvas.renderAll();
var ctx = canvas.getContext("2d");
var myImageData = ctx.getImageData(box.x, box.y, box.w, box.h);
var buffer = document.createElement('canvas');
var bufferCtx = buffer.getContext("2d");
buffer.width = box.w;
buffer.height = box.h;
bufferCtx.putImageData(myImageData, 0, 0);
window.open(buffer.toDataURL('image/png'));

Mask for putImageData with HTML5 canvas?

I want to take an irregularly shaped section from an existing image and render it as a new image in Javascript using HTML5 canvases. So, only the data inside the polygon boundary will be copied. The approach I came up with involved:
Draw the polygon in a new canvas.
Create a mask using clip
Copy the data from the original canvas using getImageData (a rectangle)
Apply the data to the new canvas using putImageData
It didn't work, the entire rectangle (e.g. the stuff from the source outside the boundary) is still appearing. This question explains why:
"The spec says that putImageData will not be affected by clipping regions." Dang!
I also tried drawing the shape, setting context.globalCompositeOperation = "source-in", and then using putImageData. Same result: no mask applied. I suspect for a similar reason.
Any suggestions on how to accomplish this goal? Here's basic code for my work in progress, in case it's not clear what I'm trying to do. (Don't try too hard to debug this, it's cleaned up/extracted from code that uses a lot of functions that aren't here, just trying to show the logic).
// coords is the polygon data for the area I want
context = $('canvas')[0].getContext("2d");
context.save();
context.beginPath();
context.moveTo(coords[0], coords[1]);
for (i = 2; i < coords.length; i += 2) {
context.lineTo(coords[i], coords[i + 1]);
}
//context.closePath();
context.clip();
$img = $('#main_image');
copy_canvas = new_canvas($img); // just creates a new canvas matching dimensions of image
copy_ctx = copy.getContext("2d");
tempImage = new Image();
tempImage.src = $img.attr("src");
copy_ctx.drawImage(tempImage,0,0,tempImage.width,tempImage.height);
// returns array x,y,x,y with t/l and b/r corners for a polygon
corners = get_corners(coords)
var data = copy_ctx.getImageData(corners[0],corners[1],corners[2],corners[3]);
//context.globalCompositeOperation = "source-in";
context.putImageData(data,0,0);
context.restore();

dont use putImageData,
just make an extra in memory canvas with document.createElement to create the mask and apply that with a drawImage() and the globalCompositeOperation function (depending on the order you need to pick the right mode;
I do something similar here the code is here (mind the CasparKleijne.Canvas.GFX.Composite function)