0
Apply perspective skew to bitmap using javascript
Community Beginner
,
/t5/animate-discussions/apply-perspective-skew-to-bitmap-using-javascript/td-p/12024018
May 08, 2021
May 08, 2021
Copy link to clipboard
Copied
Hi, I'm loading a bitmap into my HTML5 Canvas Animate file, and I'd like to use javascript to apply a perspective skew to it, but I haven't been able to find the way.
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
Community Expert
,
/t5/animate-discussions/apply-perspective-skew-to-bitmap-using-javascript/m-p/12026709#M343798
May 10, 2021
May 10, 2021
Copy link to clipboard
Copied
i'd use google to search for js that does what you want.
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
Long Con
AUTHOR
Community Beginner
,
/t5/animate-discussions/apply-perspective-skew-to-bitmap-using-javascript/m-p/12029019#M343833
May 11, 2021
May 11, 2021
Copy link to clipboard
Copied
I have tried that, and I haven't been able to find anything that I can use. One thing seems to work on Canvas, not Bitmaps. Another thing I included in my project and tried to use, but it didn't work and I don't have the javascript know-how to understand why. That's why I came here.
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more
Community Expert
,
LATEST
/t5/animate-discussions/apply-perspective-skew-to-bitmap-using-javascript/m-p/12029148#M343835
May 11, 2021
May 11, 2021
Copy link to clipboard
Copied
Hi.
Here is a suggestion to get you started.
var img, container, domElement;
function loadHandler()
{
container = document.createElement("div");
container.id = "container";
container.style.cssText = "perspective: 500px;";
anim_container.appendChild(container);
container.appendChild(img);
domElement = new createjs.DOMElement(container);
}
img = new Image();
img.id = "image";
img.src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/Winkel_triple_projection_SW.jpg/1920px-Winkel_triple_projection_SW.jpg";
img.style.cssText = "width: 600px; transform-style: preserve-3d; transform: rotateX(30deg) rotateY(-15deg);";
img.crossOrigin = "Anonymous";
img.onload = loadHandler;
I hope it helps.
Regards,
JC
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting.
Learn more

