Skip to main content
Participant
May 25, 2023 5:43 AM UTC
Answered

why canvas width is double in html then adobe animate document width

Adobe animate document width is 900 while canvas width is double 1800 in HTML, why is this  

    This topic is closed to new replies. Start a new post to keep the conversation going.
    Shabbar28866904fotmCorrect answer
    Participant
    May 25, 2023 2:56 PM UTC

    Yes to some extent, I calculate canvas width and height by multiplying with devicePixelRatio

    var pRatio = window.devicePixelRatio || 1;
    
    
    function handleMouseMove(evt) {
        if (oldX) {
            drawingCanvas.graphics.beginStroke(color)
                .setStrokeStyle(size, "round")
                .moveTo(oldX, oldY)
                .lineTo(evt.stageX / pRatio, evt.stageY / pRatio);
            stage.update();
        }
        oldX = evt.stageX / pRatio;
        oldY = evt.stageY / pRatio;
    
    }

    4 replies

    Participant
    May 25, 2023 1:09 PM UTC

    it looks like it is due to Window: devicePixelRatio property  

    Translate
    kglad
    Community Expert
    Community Expert
    May 25, 2023 1:55 PM UTC

    so, your question is answered?

    Translate
    Shabbar28866904fotmAuthorCorrect answer
    Participant
    May 25, 2023 2:56 PM UTC

    Yes to some extent, I calculate canvas width and height by multiplying with devicePixelRatio

    var pRatio = window.devicePixelRatio || 1;
    
    
    function handleMouseMove(evt) {
        if (oldX) {
            drawingCanvas.graphics.beginStroke(color)
                .setStrokeStyle(size, "round")
                .moveTo(oldX, oldY)
                .lineTo(evt.stageX / pRatio, evt.stageY / pRatio);
            stage.update();
        }
        oldX = evt.stageX / pRatio;
        oldY = evt.stageY / pRatio;
    
    }
    Translate