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 :
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>