Canvas drawing HTML Javascript on elementor

Joined
Feb 22, 2023
Messages
1
Reaction score
0
Hello everyone,

I wanted to implement an interactive drawing on my wordpress using the HTML element.
The code works well outside of wordpress but once implemented, the mouse movement seems off ( it is far away from the cursor). Any idea why that is ?
Here is the page where i want to implement the canva on wordpress : Design me a sheep – Votre studio de Webdesign et de Graphisme.

Here is the code :

HTML:
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope&display=swap" rel="stylesheet">
    <title>Drawing app</title>
    <style>
        *,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    margin: 0;
    line-height: 1.5;
    font-family: 'Manrope', sans-serif;
}

.container{
    margin-left: 2em;
}
.drawing-board{
    height: 80%;
    width: 80%;
}

#toolbar{
    display: flex;
    align-items: center;
    justify-content: space-around;
}

input[type="color"]{

    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 70px;
    height: 70px;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

input[type="color"]::-webkit-color-swatch{
    border-radius: 15px;
    border: none;
}

#lineWidth{
    visibility: hidden;
}

#clear{

    font-family: 'Manrope', sans-serif;
    border-radius: 4em;
    background-color: black;
    border: solid black 2px;
    padding-left:2em;
    padding-right: 2em;
    padding-top: .5em;
    padding-bottom: .5em;
    color: white;

}

#clear:hover{
    color: black;
    background-color: transparent;
}

    </style>
</head>
<body>
    <section class="container">
        <div class="drawing-board">
            <canvas id="drawing-board"></canvas>
        </div>
        <div id="toolbar">
            <label for="stroke">Choisissez votre couleur : </label>
            <input id="stroke" name='stroke' type="color" value="#43da86">
            <button id="clear">Effacer</button>
            <input id="lineWidth" name='lineWidth' type="number" value="18">
        </div>
    </section>

<script>
    const canvas = document.getElementById('drawing-board');
const toolbar = document.getElementById('toolbar');
const ctx = canvas.getContext('2d');

const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;

canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;

let isPainting = false;
let lineWidth = 18;
let startX;
let startY;

toolbar.addEventListener('click', e => {
    if (e.target.id === 'clear') {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
    }
});

toolbar.addEventListener('change', e => {
    if(e.target.id === 'stroke') {
        ctx.strokeStyle = e.target.value;
    }

    if(e.target.id === 'lineWidth') {
        lineWidth = e.target.value;
    }
    
});

const draw = (e) => {
    if(!isPainting) {
        return;
    }

    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
    ctx.stroke();
}

canvas.addEventListener('mousedown', (e) => {
    isPainting = true;
    startX = e.clientX;
    startY = e.clientY;
});

canvas.addEventListener('mouseup', e => {
    isPainting = false;
    ctx.stroke();
    ctx.beginPath();
});

canvas.addEventListener('mousemove', draw);
</script>

</body>
</html>
 
Joined
Mar 5, 2023
Messages
36
Reaction score
12
The issue with the interactive drawing on your WordPress page is likely due to the way WordPress modifies the HTML and CSS of your page. One possible reason for the issue is that the canvas element is not positioned correctly within the WordPress page, which causes the mouse coordinates to be offset. Here are a few suggestions you can try to fix the issue:

  1. Verify the HTML structure of your WordPress page: Make sure the HTML structure of your WordPress page matches the structure of the HTML document where the drawing app is working correctly. Check for any differences in the parent elements of the canvas element, as well as any added or modified CSS styles that could be affecting the position of the canvas.
  2. Check for conflicts with other JavaScript or CSS: Make sure there are no conflicts with other JavaScript or CSS on your WordPress page that could be affecting the position of the canvas element or its interaction with the mouse events.
  3. Use absolute positioning for the canvas element: You can try adding a CSS style to the canvas element to position it absolutely within its parent element. For example, you can add the following styles to the .drawing-board selector:

CSS:
.drawing-board {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

This will ensure the canvas element is positioned correctly within its parent element, regardless of any modifications to the page's HTML or CSS.

  1. Use the getBoundingClientRect() method to calculate the canvas offset: You can also try using the getBoundingClientRect() method to calculate the offset of the canvas element relative to the viewport. This method returns the size of an element and its position relative to the viewport. Here's an example of how you can use it:
JavaScript:
const rect = canvas.getBoundingClientRect();
const canvasOffsetX = rect.left;
const canvasOffsetY = rect.top;

This should ensure the correct offset for the mouse events.

I hope these suggestions help you fix the issue with your interactive drawing app on your WordPress page.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,707
Messages
2,569,344
Members
44,635
Latest member
Matt231

Latest Threads

Top