Click here to Skip to main content
15,847,427 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi I have a mouse pen / tablet pen.
(It's a tablet with a pen.Not actually a tablet.Something like a board with pen).
I want to write an app, so that someone can write something on it and save it as an image. I wrote the app.

Below is the problem i faced :-
- The tablet covers whole screen. But, I don't want the whole screen.
- I have a canvas to write on and i just want that tablet fit into that canvas.

There should be way. Please help me. Sorry for my english by the way.

Here is my code:

What I have tried:

JavaScript
<!DOCTYPE html>
<html lang="en">
<canvas id="can" width="100" height="100" style="position:absolute;top:10%;left:10%;border:2px solid;">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var canvas = document.querySelector( 'canvas' ),
    c = canvas.getContext( '2d' ),
    mouseX = 0,
    mouseY = 0,
    width = 300,
    height = 300,
    colour = 'red',
    mousedown = false;

    // resize the canvas
    canvas.width = width;
    canvas.height = height;

    function draw() {
    if (mousedown) {
    // set the colour
    c.fillStyle = colour;
    // start a path and paint a circle of 20 pixels at the mouse position
    c.beginPath();
    c.arc( mouseX, mouseY, 2 , 0, Math.PI*2, true );
    c.closePath();
    c.fill();
    }
    }

    // get the mouse position on the canvas
    canvas.addEventListener( 'mousemove', function( event ) {
    if( event.offsetX ){
    mouseX = event.offsetX;
    mouseY = event.offsetY;
    } else {
    mouseX = event.pageX - event.target.offsetLeft;
    mouseY = event.pageY - event.target.offsetTop;
    }
    // call the draw function
    draw();
    }, false );

    canvas.addEventListener( 'mousedown', function( event ) {
    mousedown = true;
    }, false );
    canvas.addEventListener( 'mouseup', function( event ) {
    mousedown = false;
    }, false );

    var link = document.createElement('a');
    link.innerHTML = 'download image';
    link.addEventListener('click', function(ev) {
    link.href = canvas.toDataURL();
    link.download = "mypainting.png";
    }, false);
    document.body.appendChild(link);
</script>
</body>
</html>
Posted
Updated 31-Oct-16 5:53am
v3
Comments
Suvendu Shekhar Giri 31-Oct-16 8:09am    
You are trying to use the mouse events and if you disable them outside of the canvas, how should you do other stuffs like switching between other applications or closing the app or anything?

Is that Pen supplied with any documentation/sdk or anything?

Am I missing something very basic here?
Richard Deeming 31-Oct-16 14:42pm    
Why is your <canvas> tag declared outside of the <body> tag? It should be inside:

<body>
    <canvas ...>
    <script>
    ...
    </script>
</body>

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900