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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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