Exit
  • Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
  • 한국 커뮤니티
0

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

Community Beginner ,
May 24, 2023 May 24, 2023

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

330
Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Community Beginner , May 25, 2023 May 25, 2023

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
Community Beginner ,
May 25, 2023 May 25, 2023

it looks like it is due to Window: devicePixelRatio property  

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 25, 2023 May 25, 2023

so, your question is answered?

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
May 25, 2023 May 25, 2023

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
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
May 25, 2023 May 25, 2023
LATEST

good to hear.

Translate
Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines