CODEWITHSUNDEEP
javascripthtmlcanvas
Cody Taylor
Cody Taylor

Reputation: 31

HTML5 - Canvas Element & Custom Cursor

HTML5 document - Canvas Element is not running the JavaScript parameters for the customized 'rectangle' cursor. HELP PLEASE :) 

    <head>
        <title>Canvas Element & Custom Cursor</title>
    </head>
    <body id="body" style="background-color:red;">

<canvas id="canvas" width="600" height="400" style="background- 
color:white;"> </canvas>

<script>
funtion CanvasProperties(){
var canvas = document.getElementById("canvas"); 
canvas = canvas.getContext("2d"); 
window.addEventListener("mousemove", CustomCursor, false);}

function CustomCursor(){
canvas.clearRect(0,0,600,400);
var xPosition = clientX;
var yPosition = clientY;
canvas.fillRect(xPosition, yPosition, 100, 100);}

window.addEventListener("load", CanvasProperties, false);
</script>

    </body> </html>

Upvotes: 0

Views: 1777

Answers (3)

user1693593
user1693593

Reputation:

There are several issues here, some already pointed out in Scimonster's answer, but an important one remains.

For the rectangle to be placed correctly you need to "correct" the mouse positions. The mouse positions are relative to client window while you will need them relative to canvas element.

Also, you are overriding canvas with context. Use a separate variable for it, and place those in global (parent) scope.

Here is a full version (inside the script tags):

var canvas, context;                                   // place this in global scope
    
function CanvasProperties(){
    canvas = document.getElementById("canvas");        
    context = canvas.getContext("2d");                 // separate var for context...
    window.addEventListener("mousemove", CustomCursor, false);
}
    
function CustomCursor(e){
    var canvasRect = canvas.getBoundingClientRect();   // get position of canvas element
    var xPosition = e.clientX - canvasRect.left;       // adjust mouse positions to
    var yPosition = e.clientY - canvasRect.top;        // become relative to canvas
    
    context.clearRect(0,0,600,400);                    // use context
    context.fillRect(xPosition - 50, yPosition - 50, 100, 100);
}
    
window.addEventListener("load", CanvasProperties, false);
<canvas id="canvas" width=600 height=400></canvas>

Upvotes: 1

Cody Taylor
Cody Taylor

Reputation: 31

Thanks, guys! We now have a custom cursor for painting on canvas :)

<!DOCTYPE html>
<html>

    <head>
    <title>Canvas Element & Custom Cursor</title>
    </head>

<body id="body" style="background-color:red;">

<canvas id="canvas" width="600" height="400" style="background- 
color:white;"> </canvas>

<script>
var canvas; var context;

function CanvasProperties(){
canvas = document.getElementById("canvas"); 
context = canvas.getContext("2d");
window.addEventListener("mousemove", CustomCursor, false);}

function CustomCursor(event){
var xPosition = event.clientX;
var yPosition = event.clientY;
context.fillRect(xPosition, yPosition, 100, 100);}

window.addEventListener("load", CanvasProperties, false);
</script>

</body>
</html>

Upvotes: 0

Scimonster
Scimonster

Reputation: 33399

You're not using the event object at all -- clientX and clientY aren't global properties.

function CustomCursor(event){
canvas.clearRect(0,0,600,400);
var xPosition = event.clientX;
var yPosition = event.clientY;
canvas.fillRect(xPosition, yPosition, 100, 100);}

Upvotes: 1

Related Questions