How to fit a tablet pen to a canvas

Question

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 31-Oct-16 1:55am

Member 12824995

Updated 31-Oct-16 4:53am

Rahul VB

v3

Add a Solution

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>

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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