What is the method for creating a line on a web browser based on mouse activity?

Is there a way to draw a line on the browser based on mouse movement? What steps should I take to make this happen?

htmlcssbrowsermouseover

Answer №1

If you want to incorporate a <canvas> element, you can achieve this by following the example showcased in this JsFiddle.

<html>
<script type="text/javascript">
var canvas, ctx, flag = false,
    prevX = 0,
    currX = 0,
    prevY = 0,
    currY = 0,
    dot_flag = false;

var x = "black",
    y = 2;

function init() {
    canvas = document.getElementById('can');
    ctx = canvas.getContext("2d");
    w = canvas.width;
    h = canvas.height;

    canvas.addEventListener("mousemove", function (e) {
        findxy('move', e)
    }, false);
    canvas.addEventListener("mousedown", function (e) {
        findxy('down', e)
    }, false);
    canvas.addEventListener("mouseup", function (e) {
        findxy('up', e)
    }, false);
    canvas.addEventListener("mouseout", function (e) {
        findxy('out', e)
    }, false);
}

function color(obj) {
    switch (obj.id) {
        case "green":
            x = "green";
            break;
        case "blue":
            x = "blue";
            break;
        case "red":
            x = "red";
            break;
        case "yellow":
            x = "yellow";
            break;
        case "orange":
            x = "orange";
            break;
        case "black":
            x = "black";
            break;
        case "white":
            x = "white";
            break;
    }
    if (x == "white") y = 14;
    else y = 2;

}

function draw() {
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);
    ctx.lineTo(currX, currY);
    ctx.strokeStyle = x;
    ctx.lineWidth = y;
    ctx.stroke();
    ctx.closePath();
}

function erase() {
    var m = confirm("Do you want to clear the canvas?");
    if (m) {
        ctx.clearRect(0, 0, w, h);
        document.getElementById("canvasimg").style.display = "none";
    }
}

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

function findxy(res, e) {
    if (res == 'down') {
        prevX = currX;
        prevY = currY;
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;

        flag = true;
        dot_flag = true;
        if (dot_flag) {
            ctx.beginPath();
            ctx.fillStyle = x;
            ctx.fillRect(currX, currY, 2, 2);
            ctx.closePath();
            dot_flag = false;
        }
    }
    if (res == 'up' || res == "out") {
        flag = false;
    }
    if (res == 'move') {
        if (flag) {
            prevX = currX;
            prevY = currY;
            currX = e.clientX - canvas.offsetLeft;
            currY = e.clientY - canvas.offsetTop;
            draw();
        }
    }
}
</script>
<body onload="init()">
    <canvas id="can" width="400" height="400" style="position:absolute;top:10%;left:10%;border:2px solid;"></canvas>
    <div style="position:absolute;top:12%;left:43%;">Select Color</div>
    <div style="position:absolute;top:15%;left:45%;width:10px;height:10px;background:green;" id="green" onclick="color(this)"></div>
    <div style="position:absolute;top:15%;left:46%;width:10px;height:10px;background:blue;" id="blue" onclick="color(this)"></div>
    <div style="position:absolute;top:15%;left:47%;width:10px;height:10px;background:red;" id="red" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:45%;width:10px;height:10px;background:yellow;" id="yellow" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:46%;width:10px;height:10px;background:orange;" id="orange" onclick="color(this)"></div>
    <div style="position:absolute;top:17%;left:47%;width:10px;height:10px;background:black;" id="black" onclick="color(this)"></div>
    <div style="position:absolute;top:20%;left:43%;">Eraser</div>
    <div style="position:absolute;top:22%;left:45%;width:15px;height:15px;background:white;border:2px solid;" id="white" onclick="color(this)"></div>
    <img id="canvasimg" style="position:absolute;top:10%;left:52%;" style="display:none;">
    <input type="button" value="Save" id="btn" size="30" onclick="save()" style="position:absolute;top:55%;left:10%;">
    <input type="button" value="Clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggling with setting margins effectively in Bootstrap for the desired layout

I am attempting to create two columns with space between them, but whenever I try to add a margin-right, one of the columns goes down. Can someone please assist me? <div class=row> <div class="boxi col-6"> Content here ...

htmlcssbootstrap-4

Fill the inner html content based on the dropdown selection

I am working on a form that includes a dropdown selection: <form class="form-horizontal" method="post" > <div class="form-group"> <label class="control-label col-sm-2">Select Player< ...

phpjqueryhtmlajaxinnerhtml

What is the best way to fetch the current and following elements using mysqli_fetch_array() inside a while loop?

There is a table with the possibility of having multiple identical records. I need to perform a task if there are duplicates present. How can I verify this scenario? <div> <table class="table"> <thead class="table table-bordered" style="ba ...

phphtmlmysql

Rest assured, with Ajax Security, your protection is in good

I am currently developing a browser game that heavily utilizes AJAX instead of page refreshes. The combination of PHP and JavaScript is being employed for this project. However, during the course of my work, I became aware of the potential security vulnera ...

phpjavascriptjqueryhtmlajax

Ways to enable users to input grammatical equations while verifying certain rules in a text box

I am looking for validation of equations in HTML, not evaluation. I want to allow users to input equations like the following in a textbox, with validation: 400 - IF(age > 32, 6, 4) + 10 The 'age' is a fixed string, and there will be other ...

javascriptjqueryregexhtmlgrammar

Position the brand logo in between the left and right navigation menus using Bootstrap 4

<nav class="navbar-toggleable-sm" role="navigation"> <div class="container justify-content-center"> <div class="navbar-brand navbar-brand-centered">Brand</div> <ul class=" navbar-nav float-left"> ...

htmlbootstrap-4

Xpath: Determining the order of a tag in relation to text

Imagine there are two different snippets of HTML code as examples: <p>This is some text: <b>ABCD12345</b></p> <p><b>Name:</b> John Doe</p> I have the ability to separate the <b> and non-<b> sec ...

pythonhtmlxmlxpathlxml

What causes the width of bootstrap column content to not expand?

It seems like I'm overlooking something really basic here. The reason for my current predicament may be more complex, but let's simplify things. Take a look at this straightforward template using bootstrap classes: <div class="wrapper&quo ...

htmlcsstwitter-bootstrap

Is it possible to manipulate div elements with JavaScript while utilizing node.js?

It seems like I'm missing something obvious here, as I'm working with node.js and I have correctly linked a javascript file (alert("hello"); works). However, I can't seem to make any changes to the DOM. Here's a simple example: jade: ...

javascriptcssnode.jspugstylus

Issues with jquery gui elements in Chrome extension being unresponsive

Using chrome extensions and jquery to create a customized GUI, but running into issues with displaying the jquery elements on the HTML page. Can anyone spot what might be the problem? manifest.json: { "name": "my extension", "description": "my first ...

javascriptjqueryhtmlgoogle-chrome-app

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

Eliminate HTML TAG entries from the input form

My issue is that when I try to type a comma, it does not allow me to do so. How can I add other characters like <, >, /, \, etc? $("#in1").keypress(function (evt) { if (String.fromCharCode(evt.which) == ",") return false; }); < ...

javascriptjqueryhtmlinputkeypress

What is the process for including a class along with a data attribute?

Working on implementing data buttons, struggling to make the function operational. Attempting to assign a class to an element through a data attribute and corresponding ID, then wanting to prevent event propagation with the button contained within the subj ...

javascriptcss

What is the best way to make a prevent default function for an input field?

In the case where a user inputs numerical values, only even numbers should be displayed, with odd numbers being prevented by default. HTML: Input any number: <input type="text"> <p id="even"></p> JavaScript: function ...

javascripthtml

hyperlinks along the edges surrounding a centrally positioned image

I'm facing an issue with an image that is also a link. I used the following code: <a href="link.html"><img src="img.png" id="cloud"></img></a> After, I centered and resized it with the help of this CSS: #cloud { display: blo ...

htmlcss

Choose or unselect checkboxes that are currently visible

I am working on an accordion feature that includes checkboxes for each item. Some of the accordion items are initially hidden using the style="display:none;" attribute. Take a look at the HTML DOM hierarchy in this screenshot: https://i.sstatic.net/Za8Ly ...

javascriptjqueryhtml

Is it possible for HTML to call library scripts in the sidebar?

I recently encountered an issue with a sidebar created in HTML on Spreadsheets. Everything was working perfectly until I moved the code to the main library where all the code is managed. Now, it seems that the function used by the sidebar is undefined. How ...

htmlgoogle-apps-scriptgoogle-sheetssidebar

Tips for effectively utilizing tabs to showcase information for a particular user rather than solely the initial one

I am fetching multiple user data from an API call, and all users are rendered using the same HTML and CSS. However, when I switch between tabs for each user, only the first user's information changes instead of the specific user I clicked on. I have a ...

htmlcssangular

What is the best way to check the functionality of the front-end across a range of web pages?

I was curious about: Programs capable of performing this task. The specific technology required for this task. If there are any programming languages that could simplify this task. Edit: Provided some answers and tools that might be beneficial to ...

javascriptjqueryhtmlweb

My custom fonts in CSS are being truncated at the bottom, specifically the descenders like "g" and "y"

I am struggling to understand why certain letters, like 'g' and 'y', are being cut off when they drop below the line in my paragraph. I have tried adjusting the line height, experimenting with different font sizes in pixels, points, and ...

htmlcss