Skip to main content
Known Participant
May 8, 2021
Question

Apply perspective skew to bitmap using javascript

  • May 8, 2021
  • 2 replies
  • 518 views

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.

    This topic has been closed for replies.

    2 replies

    JoãoCésar17023019
    Community Expert
    Community Expert
    May 11, 2021

    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

    kglad
    Community Expert
    Community Expert
    May 10, 2021

    i'd use google to search for js that does what you want.

    Long ConAuthor
    Known Participant
    May 11, 2021

    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.