When it comes to HTML and Javascript drawing, getting the positioning just right can be a challenge

Question

When it comes to HTML and Javascript drawing, getting the positioning just right can be a challenge

I'm currently developing a control website for a drawing robot as part of a school project. However, I've been facing some challenges with the functionality of the drawing feature.

Though I admit that the site lacks attention to detail, my main focus is on getting the drawing function to work correctly.

One issue I've encountered is JavaScript not recognizing the HTML elements unless I manually call the function again using a button or an onload="" function.

My background is primarily in JAVA, and I haven't had formal training in JavaScript, HTML, or CSS design, so I kindly ask not to be judged based on that.

Initially, I suspected that the canvasOffsetx and y values were not obtaining absolute positions but relative ones from the parent div, resulting in incorrect drawings. Unfortunately, I'm unsure how to resolve this without disrupting the entire CSS layout.

The area of concern lies within the "actions" div; the remaining content is unrelated to the issue at hand.

To access the full codebase, please visit the following GitHub repository: https://github.com/Masaslo/StackOverflowQuestions.git

javascript html css html5-canvas

Answer 1

Answer №1

Indeed, the positioning of canvasOffsetX and Y is in relation to its parent element. It is crucial not to mismatch the canvas style and size settings as this could lead to image distortion. Adjustments must also be made when calculating the drawing position. The drawing algorithm must be revised accordingly.

To correct this, remove the styling from the canvas tag in the HTML:

- <canvas id="drawing-board" style="width: 502px; height: 502px;"></canvas>
+ <canvas id="drawing-board"></canvas>

The corrected version of the canvasFunction:

function canvasFunction(){
    const canvas = document.getElementById('drawing-board');
    const toolbar = document.getElementById('toolbar');
    const ctx = canvas.getContext('2d');
    
    const canvasOffsetX = canvas.getBoundingClientRect().left;
    const canvasOffsetY = canvas.getBoundingClientRect().top;
    
    canvas.width = window.innerWidth - canvasOffsetX;
    canvas.height = window.innerHeight - canvasOffsetY;
    
    let isPainting = false;
    let lineWidth = 5;
    let startX;
    let startY;
    
    ctx.strokeStyle = 5;
    
  
    toolbar.addEventListener('click', e => {
        if (e.target.id === 'clear') {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    });
    
    
    const draw = (e) => {
        if(!isPainting) {
            return;
        }
    
        const canvasOffsetX = canvas.getBoundingClientRect().left;
        const canvasOffsetY = canvas.getBoundingClientRect().top;

        ctx.lineWidth = lineWidth;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(startX - canvasOffsetX, startY - canvasOffsetY);
        ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
        ctx.stroke();
        ctx.closePath();
        startX = e.clientX;
        startY = e.clientY;
    }
    
    canvas.addEventListener('mousedown', (e) => {
        isPainting = true;
        startX = e.clientX;
        startY = e.clientY;
    });
    
    canvas.addEventListener('mouseup', e => {
        isPainting = false;
    });
    
    canvas.addEventListener('mousemove', draw);
    
}

Answer 2

Indeed, the positioning of canvasOffsetX and Y is in relation to its parent element. It is crucial not to mismatch the canvas style and size settings as this could lead to image distortion. Adjustments must also be made when calculating the drawing position. The drawing algorithm must be revised accordingly.

To correct this, remove the styling from the canvas tag in the HTML:

- <canvas id="drawing-board" style="width: 502px; height: 502px;"></canvas>
+ <canvas id="drawing-board"></canvas>

The corrected version of the canvasFunction:

function canvasFunction(){
    const canvas = document.getElementById('drawing-board');
    const toolbar = document.getElementById('toolbar');
    const ctx = canvas.getContext('2d');
    
    const canvasOffsetX = canvas.getBoundingClientRect().left;
    const canvasOffsetY = canvas.getBoundingClientRect().top;
    
    canvas.width = window.innerWidth - canvasOffsetX;
    canvas.height = window.innerHeight - canvasOffsetY;
    
    let isPainting = false;
    let lineWidth = 5;
    let startX;
    let startY;
    
    ctx.strokeStyle = 5;
    
  
    toolbar.addEventListener('click', e => {
        if (e.target.id === 'clear') {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        }
    });
    
    
    const draw = (e) => {
        if(!isPainting) {
            return;
        }
    
        const canvasOffsetX = canvas.getBoundingClientRect().left;
        const canvasOffsetY = canvas.getBoundingClientRect().top;

        ctx.lineWidth = lineWidth;
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(startX - canvasOffsetX, startY - canvasOffsetY);
        ctx.lineTo(e.clientX - canvasOffsetX, e.clientY - canvasOffsetY);
        ctx.stroke();
        ctx.closePath();
        startX = e.clientX;
        startY = e.clientY;
    }
    
    canvas.addEventListener('mousedown', (e) => {
        isPainting = true;
        startX = e.clientX;
        startY = e.clientY;
    });
    
    canvas.addEventListener('mouseup', e => {
        isPainting = false;
    });
    
    canvas.addEventListener('mousemove', draw);
    
}

When it comes to HTML and Javascript drawing, getting the positioning just right can be a challenge

Answer №1

Similar questions

Can one integrate various angular components constructed using distinct versions of Angular?

Unlocking the Secret: Retrieving Click Event Values from a jQuery Function

Animating object on display and returning it with keyframes

Looking for a solution to dynamically fill a list in JQuery with data from a JSON file. Any suggestions for troubleshooting?

A streamlined method for generating an array containing all numerical string values

Struggling to understand JSON in joint.js?

Struggling to make cookies stick in IE9

Are there equivalent npm variables like (`npm_config_`) available in yarn console scripts?

Challenges Encountered When Working with Date Fields in Kendo JS Grid

.mouseleave() triggers when exiting a designated boundary area

Accessing the page directly in a Nuxt SPA is not permitted

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Repeating the process of running a function multiple times

Exploring the complexities of object scope in Javascript

Could not locate the express.js file

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

"Utilize the style attribute to modify the appearance based on the

Easily transfer files from your browser application to your Windows applications such as Outlook or printer queues using a simple drag and

Sending AJAX data from VIEW to CONTROLLER in PHP (MVC) using AJAX: A step-by-step guide

Stop SCSS from processing CSS variables in Angular-CLI