0

Есть простая страница с Canvas. И простой скрипт o.js, задача которого нарисовать квадрат заданного размера под курсором:

    const canvas = $("#area");
    const area = canvas[0].getContext("2d");
    const rect = canvas[0].getBoundingClientRect();
    
    let size = 20;
    
    let lx = 0;
    let ly = 0;
    
    canvas.click(function(e){
        area.clearRect(lx, ly, size, size);
        lx = e.clientX - rect.left;
        ly = e.clientY - rect.top;
        console.log(lx);
        console.log(ly);
        area.fillRect(lx, ly, size, size);
    })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
        <head>
    
        </head>
        <body>
            <canvas id="area" style="width: 800px; height: 800px; border: black solid 1px"></canvas>
        </body>
        <script src="src/o.js"></script>
    </html>

Проблема в том, что квадрат рисуется правее, ниже курсора, причём чем дальше клик от начала координат, тем выше разница в расстоянии между курсором и квадратом. В чём может быть проблема?

1 ответ 1

2

Как оказалось проблема связано с заданием размеров canvas через style. Если убрать style и добавить следующие строки в o.js, всё работает корректно:

var height = canvas.height = window.innerHeight;
var width = canvas.width = window.innerWidth;
1
  • Надо просто подумать.
    – Ver Nick
    2 дек 2018 в 19:24

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.