Home / user-15867

mperez's questions

Martin Hope
mperez
Asked: 2020-02-20 07:22:57 +0800 CST
  • 2

By creating a canvas, I want it to always occupy the entire screen. canvasI am trying to automatically resize the window , but without changing the size of the graphic content it contains.

So that it occupies the entire screen when resizing I am using jQuery:

$(window).resize(function () {
   $("#myCanvas").css({ "width": "100%", "height": "100%" });
});

With this shape the content of the canvas is enlarged, and that is not what I am looking for. In the following images I show what I want to avoid. On the one hand, we have any image:

Screen image with small dimension

And with the jQuery code that I have written, when resizing the screen, the image contained in the canvas is deformed:

modified image

I have added the canvasto a divwith the intention of giving it context so that the canvas uses the dimension of the div to which it belongs, and modifying with jQuery the dimension not of the canvas, but of the div, but in this way the painting area of ​​the canvas. Do you know of a way to update the dimension of the canvas without altering the already existing graphic content? In the example above I draw a circle, but it could be any graphic element, known or not, so reloading it canvaswith the new size and redrawing the graphic component is not the solution I'm looking for. In the following code I leave the example of using canvasas a blackboard in which to draw by clicking and moving the mouse, as if it were a "paint".

Here is the code I am using for testing:

 $(window).resize(function () {
        $("#myCanvas").css({ "width": "100%", "height": "100%" });
    });

 var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.beginPath();
        ctx.width = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('width'));
        ctx.height = parseInt(getComputedStyle(document.getElementById('container')).getPropertyValue('height'));
         var mouse = { x: 0, y: 0 };

    canvas.addEventListener('mousemove', function (e) {
        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);
 ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
canvas.addEventListener('mousedown', function (e) {
        ctx.beginPath();
        ctx.moveTo(mouse.x, mouse.y);

        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function () {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function () {
        ctx.lineTo(mouse.x, mouse.y);
        ctx.stroke();
    };
 body,
 html {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#container {
  width: 100%;
  height: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
        <canvas id="myCanvas"></canvas>
    </div>

javascript
Martin Hope
mperez
Asked: 2020-02-29 08:29:37 +0800 CST
  • 13

I am trying to change the color of the elements, changing their class, while the mouse is held down, giving a "paint" effect. Doing it by mouse clicks I have it, here is the code:

$(() => {
    $('table').on("click", "td", (event)=> {
       let selected = $(event.target);
       selected.toggleClass("obstacle");
    });
})
table {
  border-collapse: collapse;
}
td {
  padding: 20px;
  border: 2px solid black;
  cursor: pointer;
}

.obstacle {
  background-color: red !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

Do you know of a way to change the style by holding down the mouse? Without having to make as many clicks as changes are desired.

I have tried with events like OnMouseDown and such, but I am not able to find the way.

The idea is while the mouse is pressed, do something like this: visual idea

A greeting and thanks in advance

javascript