How can I keep the canvas in focus - javascript

I'm making an image drawing application with html and javascript. I made it with canvas and added some buttons(<div>s) on the canvas. Of course, canvas have onmousedown, onmouseup, onmousemove handlers to draw lines. But when I move mouse to the position of buttons or out of the canvas, then return to the canvas area, line breaks.
refer to the code(http://jsfiddle.net/coldmund/MQKMv/) please.
html:
<div>
<div style="position: absolute; margin-top: 0px; margin-left: 0px;"><canvas id="canvas" width="500" height="300" onmousedown="down(event)" onmouseup="up()" onmousemove="move(event)" style="border: 1px solid"></canvas></div>
<div style="position: absolute; margin-top: 100px; margin-left: 100px; width: 100px; height: 100px; background: #ff0000; opacity: 0.5"></div>
</div>
js:
var mouseDown = false;
down = function(e)
{
mouseDown = true;
prevX = e.clientX;
prevY = e.clientY;
};
up = function()
{
mouseDown = false;
};
move = function(e)
{
if( mouseDown === false )
return;
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.lineWidth = 5;
context.lineCap = 'round';
context.beginPath();
context.moveTo( prevX, prevY );
context.lineTo( e.clientX, e.clientY );
context.stroke();
prevX = e.clientX;
prevY = e.clientY;
};

Here is a fiddle with a potential solution (fiddle). This basically toggles the buttons css property to pointer-events:none while drawing on the canvas.
The differences between your code and mine basically reduce to the following:
// CSS
.no-pointer-events {
pointer-events:none;
}
// Inside the mousedown handler
document.getElementById( "button1" ).class = "no-pointer-events";
// Inside the mouseup handler
document.getElementById( "button1" ).class = "";

Related

HTML canvas painting start from right rather than top

I try to make drawing app on canvas. It works well in full screen but when I set its width and height according to a div container. It didn't work correctly. It starts painting from the right rather than the top left.
Here is my code pen link: https://codepen.io/pranaysharma995/pen/GRpGVmG.
div class="container">
<div class="col-md-4 col-md-offset-4 " id="canvas-container">
<canvas id="canvas">
</canvas></div>
#canvas-container{
position: relative;
width: 600px;
height: 600px;
background-color: #f3f6f7;
}
You have to offset the mouse position with the canvas.getBoundingClientRect
var canvas = document.querySelector("#canvas");
var container = document.querySelector(".col-md-4");
canvas.width = container.offsetWidth;
canvas.height = container.offsetHeight;
var c = canvas.getContext('2d');
c.fillStyle = "red";
c.strokeStyle = "red";
c.lineWidth = 5;
c.lineCap = "round";
function draw(e) {
var rect = canvas.getBoundingClientRect();
var x = e.clientX - rect.left
var y = e.clientY - rect.top
c.lineTo(x, y);
c.stroke();
}
canvas.addEventListener("mousemove", draw);
.container {
position: absolute;
left: 50px;
top: 25px
}
#canvas-container {
position: relative;
width: 200px;
height: 200px;
background-color: #f3f6f7;
}
<div class="container">
<div class="col-md-4 col-md-offset-4 " id="canvas-container">
<canvas id="canvas"></canvas>
</div>
</div>

How to drag or move a span into the Div by using javascript

How to move or drag the span into the Div element. My element structure is the Div -> Span. Here I need to drag the Span inside the div element without drag beyond that div. I have tried this by calculating pixels but didn't give a solution. I don't need a native onDrag method.
I need to calculate pixels and drag the Span inside the Div. Here is my code.
var handleClick = false;
window.dragging = function(event) {
if (handleClick) {
var bar = document.getElementsByClassName('bar')[0],
handle = document.getElementsByClassName('handle')[0];
var left = bar.offsetWidth - handle.offsetWidth;
tops = (bar.offsetWidth - handle.offsetWidth);
pixel = left < ((pixel - 0) / 1.233445) ? left : ((pixel - 0) / 1.233445);
handle.style.left = pixel + "px";
}
}
document.addEventListener('mouseup', function() {
handleClick = false;
});
window.handlersDown = function() {
handleClick = true;
}
.bar {
width: 100px;
height: 30px;
border: 1px solid;
position: relative;
}
.handle {
width: 20px;
height: 20px;
left: 2px;
top: 5px;
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
}
<div class="bar">
<span class="handle" onmousedown="handlersDown()" onmousemove="dragging(event)"></span>
</div>
I have modified your code a bit and changed the selectors from class to ID. I also would advice you to use external libraries to make it more easy for you. Besides that I also removed the event listeners inside your HTML and translate them to Javascript. Is this what you want?
window.onload = addListeners();
function addListeners(){
document.getElementById('handle').addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp()
{
window.removeEventListener('mousemove', spanMove, true);
}
function mouseDown(e){
window.addEventListener('mousemove', spanMove, true);
}
function spanMove(e){
var bar = document.getElementById('bar')
var span = document.getElementById('handle');
// variables
var bar_width = bar.offsetWidth;
var handle_width = span.offsetWidth;
// stop scroll left if the minimum and maximum is reached
if(e.clientX < bar_width - handle_width - 1 && e.clientX > 1){
span.style.left = e.clientX + 'px';
}
}
#bar {
width: 100px;
height: 30px;
border: 1px solid;
position: relative;
}
#handle {
width: 20px;
height: 20px;
left: 2px;
top: 5px;
background-color: rgba(255, 0, 0, 0.5);
position: absolute;
}
<div id="bar">
<span id="handle"></span>
</div>
In 2020, following solution works perfectly on last version of Chrome, Opera, Firefox and Edge Chromium.
window.onload = addListeners();
function addListeners()
{
var div = document.getElementById('div');
var span = document.getElementById('span');
span.addEventListener('mousedown', onMouseDown, false);
window.addEventListener('mouseup', onMouseUp, false);
//compute space between left border of <div> and left border of <span>
// this value is also used to compute space at right
iMinLeft = span.offsetLeft;
// compute max left value allowed so that span remains in <div>
iMaxLeft = div.clientWidth - span.offsetWidth - iMinLeft;
}
function onMouseDown(e)
{
if (e.which === 1) // left button is pressed
{
e.preventDefault();
window.addEventListener('mousemove', onMouseMove, true);
// save mouse X position to compute deplacement
posMouseX = e.clientX;
span.style.background = "yellow";
}
}
function onMouseMove(e)
{
e.preventDefault();
//compute mouse deplacement
deltaX = posMouseX - e.clientX;
//compute new left position of <span> element
iNewLeft = span.offsetLeft - deltaX;
if (iNewLeft < iMinLeft)
{
iNewLeft = iMinLeft;
}
else
{
if (iNewLeft > iMaxLeft)
{
iNewLeft = iMaxLeft;
}
}
span.style.left = iNewLeft + 'px';
// save mouse X position to compute NEXT deplacement
posMouseX = e.clientX;
}
function onMouseUp(e)
{
if (e.which === 1) // left button is pressed
{
e.preventDefault();
span.style.background = "white";
window.removeEventListener('mousemove', onMouseMove, true);
}
}
#div
{
width: 200px;
height: 50px;
border: 1px solid;
position: relative;
left: 50px;
}
#span
{
cursor: pointer;
font-size: 30px;
width: auto;
height: 40px;
left: 2px;
top: 5px;
position: absolute;
}
<div id="div">
<span id="span">&#x1F603</span>
</div>
JavaScript line e.preventDefault(); is necessary to avoid <span> to become 'blue' when dragging.
CSS code cursor: pointer; is only to see that unicode is clickable.
Javascript line if (e.which === 1) has been added to prevent emoticon to move when RIGHT mouse button is clicked.
The rectangle around emoticon when <span> is dragged move without being shifted (see previous solution) and space remaining in left or in right are equal.
Thanks to w3schools-exemple

Snapping Drag and Drop Items in JavaScript

I am trying to use drag and drop to move pictures from one <div> to another.
Currently, I can move the pictures anywhere in the destination <div>, but what I really want is that the pictures snap together when dropped. Ideally, they would be able to snap together on any side (not just, for example, on the bottom or on the right).
I've tried a few different things (including using <canvas>) and it didn't work.
This is what I have so far:
var clone;
var offsetx = null;
var offsety = null;
var isClone = false;
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
offsetx = ev.target.offsetLeft - event.clientX;
offsety = ev.target.offsetTop - event.clientY;
ev.dataTransfer.setData("text", ev.target.id);
}
function dropTrash(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var remove = document.getElementById(data);
remove.parentNode.removeChild(remove);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
}
function dropClone(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
var num = Math.random() * (1000 - 1) + 1;
isClone = true;
clone = document.getElementById(data).cloneNode(true);
clone.id = "newId" + num.toString();
clone.style.position = "absolute";
clone.style.left = (event.clientX+offsetx)+"px";
clone.style.top = (event.clientY+offsety)+"px";
ev.target.appendChild(clone);
}
html, body {
height: 100%;
padding: 0;
margin: 0;
}
div {
width: 50%;
height: 50%;
float: left;
}
#div1 {
background: #DDD;
}
#div2 {
background: #AAA;
}
#div3 {
background: #777;
}
#div4 {
background: #444;
}
#imgDiv {
width: 611px;
height: 324px;
border: 5px solid #DDD;
}
<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3" ondrop="dropTrash(event)" ondragover="allowDrop(event)">
<img id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">
<img id="drag2" src="http://www.earthtimes.org/newsimage/lizard_Ngo_Van_Tri_big_281.jpg" draggable="true" ondragstart="drag(event)" width="105" height="105">
</div>
<div id="div4">
<div align="center" id="imgDiv" ondrop="dropClone(event)" ondragover="allowDrop(event)"></div>
</div>
When you start dragging an image, you need to store the position of the cursor, relative to that particular image.
There are multiple position properties in the MouseEvent that will help you calculate that, but if browser support is not an issue, I would go for MouseEvent.offsetX and MouseEvent.offsetY. From the docs:
The offsetX/offsetY read-only property of the MouseEvent interface provides the offset in the X/Y coordinate of the mouse pointer between that event and the padding edge of the target node.
So, on dragstart, you will do just:
x = e.offsetX;
y = e.offsetY;
Then, when you drop the image in your, let's call it canvas (note the italics as it is not a <canvas> element, but any other element that you use as your drop zone, a <div> in this particular example), you need to know the position of the cursor relative to that canvas, so you may think you could use offsetX and offsetY again, and your are partially right. That would give you the expected value if you drop the image on the canvas itself, but there may be other images in it already, and you may drop the current one on top of another one, getting the offsetX and offsetY relative to that one instead.
What you can do is use MouseEvent.pageX and MouseEvent.pageY and, from that value, subtract the position of the (upper-left corner) of that canvas element, which you can get from HTMLElement.offsetLeft and HTMLElement.offsetTop:
e.pageX - imageCanvas.offsetLeft;
e.pageY - imageCanvas.offsetTop;
With this you will get the position of the cursor relative to the canvas element.
Now, you need to subtract the x and y values that you stored on dragstart, and that will give you the left and top values of the upper-left corner of the dragged image, relative to the canvas element:
image.style.left = (e.pageX - imagesCanvas.offsetLeft - x) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y) + 'px';
All together it will look like this:
let x;
let y;
let currentTarget = null;
let cloneElement = false;
function startDrag(e, clone) {
const target = e.target;
if (target.tagName === 'IMG') {
x = e.offsetX;
y = e.offsetY;
currentTarget = target;
cloneElement = clone;
}
}
function cloneImage(e) {
startDrag(e, true);
}
function moveImage(e) {
startDrag(e, false);
}
function removeImage(e) {
if (!cloneElement) {
currentTarget.remove();
}
}
function stickImage(e) {
const image = cloneElement ? currentTarget.cloneNode(true) : currentTarget;
imagesCanvas.appendChild(image);
// + 1 for the border
image.style.left = (e.pageX - imagesCanvas.offsetLeft - x + 1) + 'px';
image.style.top = (e.pageY - imagesCanvas.offsetTop - y + 1) + 'px';
currentTarget = null;
}
function allowDrag(e) {
e.preventDefault();
}
// Bind event listeners:
const imagesBarElement = document.getElementById('imagesBar');
const imagesCanvasElement = document.getElementById('imagesCanvas');
document.addEventListener('dragenter', allowDrag);
document.addEventListener('dragover', allowDrag);
imagesBarElement.addEventListener('dragstart', cloneImage);
imagesBarElement.addEventListener('drop', removeImage);
imagesCanvasElement.addEventListener('dragstart', moveImage);
imagesCanvasElement.addEventListener('drop', stickImage);
body {
margin: 0;
font-size: 0;
display: flex;
flex-direction: column;
height: 100vh;
user-select: none;
}
img {
width: 100px;
height: 100px;
}
#imagesBar {
height: 100px;
border-bottom: 1px solid #CCC;
padding: 10px 0;
}
#imagesBar > img {
margin: 0 0 0 10px;
}
#imagesCanvas {
position: relative;
background: #EEE;
flex-grow: 1;
overflow: hidden;
}
#imagesCanvas > img {
position: absolute;
}
<div id="imagesBar">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Bartagame_fcm.jpg/1200px-Bartagame_fcm.jpg" draggable="true">
<img src="http://www.earthtimes.org/newsimage/lizard_Ngo_Van_Tri_big_281.jpg" draggable="true">
</div>
<div id="imagesCanvas"></div>

Hover events on element covered by higher z-index?

I have a canvas element (canvas-mouse) that spans the whole screen - its purpose is to draw a 50% opacity circle around the mouse of a certain size (grabsize). Also on the page will be a number of images in divs. I want these images to be clickable/hoverable, but I also want the 50% opacity circle in canvas-mouse to appear on top of them.
Is there any way to accomplish this?
HTML:
<canvas id="canvas-mouse" class="fullscreen"></canvas>
<div class="object die"><img src="images/Die_d6.svg"></div>
CSS:
html, body {
width: 100%;
height: 100%;
margin: 2px;
overflow: hidden;
color: #FFFFFF;
background-color: #2C744C;
}
canvas.fullscreen {
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.object {
position: absolute;
}
#canvas-mouse {
z-index: 10;
}
JavaScript:
CanvasRenderingContext2D.prototype.drawCircle = function(xpos, ypos, radius, linewidth, linecolor, fill) {
if(typeof(linewidth)==="undefined") {
linewidth = 1;
}
if(typeof(linecolor)==="undefined") {
linecolor = "#000000";
}
this.beginPath();
this.arc(xpos, ypos, radius, 0, 2*Math.PI, false);
this.lineWidth = linewidth;
if(typeof(fill)!=="undefined") {
this.fillStyle = fill
this.fill();
}
this.strokeStyle = linecolor;
this.stroke();
}
CanvasRenderingContext2D.prototype.maximize = function() {
this.canvas.width = window.innerWidth;
this.canvas.height = window.innerHeight;
}
mousectx = $("#canvas-mouse")[0].getContext("2d");
mousectx.maximize();
//Dice handlers
$(".object.die").hover(function() {
//Hover event goes here
})
$(".object.die").mousedown(function() {
//Click event goes here
})
//Mouse movement handler
$(document).mousemove(function(e){
//Get the mouse positions and put them in {mouse}
mouse.x = e.pageX;z
mouse.y = e.pageY;
//Redraw the grab circle
mousectx.clearCanvas();
mousectx.drawCircle(mouse.x,mouse.y,grabsize,1,"#000000","rgba(0,0,255,0.5)");
});
Thanks in advance.
Try using pointer-events: none. This rule tells the browser to ignore an element. Mouse events won't be received by it, but will 'pass through'.
#canvas-mouse {
z-index: 10;
pointer-events: none;
}

Scrollable canvas inside div

I have a html5 canvas. I need to show the fixed portion of it in the div(Div1). When I swipe inside Div1, I need to scroll the canvas. So as I scroll, I'll see corresponding part of the canvas.
I tried something like this:
<div id="Div1" style=" float: left; width: 50px; overflow:hidden; ">
<canvas id="myCanvas1" width="200px" style="border: 1px solid #ff0000; position: absolute;">
</canvas>
</div>
jsFiddled here
it won't work (scrolling canvas from inside div in some 'design' conditions), first your overflow is hidden. Try scrolling the content inside the canvas instead.
OR, try this : http://jsfiddle.net/9g3GG/2/
<div id="Div1" style=" float: left; width: 150px; overflow:scroll; ">
<canvas id="myCanvas1" width="200" style="border:1px solid #ff0000;">asdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdfasdf asd as asfqwe asd asdf</canvas>
</div>
Here is a demo of using an oversize canvas, and scrolling with mouse movements by adjusting the CSS margin: https://jsfiddle.net/ax7n8944/
HTML:
<div id="canvasdiv" style="width: 500px; height: 250px; overflow: hidden">
<canvas id="canvas" width="10000px" height="250px"></canvas>
</div>
JS:
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var dragging = false;
var lastX;
var marginLeft = 0;
for (var i = 0; i < 1000; i++) {
context.beginPath();
context.arc(Math.random() * 10000, Math.random() * 250, 20.0, 0, 2 * Math.PI, false);
context.stroke();
}
canvas.addEventListener('mousedown', function(e) {
var evt = e || event;
dragging = true;
lastX = evt.clientX;
e.preventDefault();
}, false);
window.addEventListener('mousemove', function(e) {
var evt = e || event;
if (dragging) {
var delta = evt.clientX - lastX;
lastX = evt.clientX;
marginLeft += delta;
canvas.style.marginLeft = marginLeft + "px";
}
e.preventDefault();
}, false);
window.addEventListener('mouseup', function() {
dragging = false;
}, false);
It is better to scroll inside the canvas, see this Phaser plugin to do that https://jdnichollsc.github.io/Phaser-Kinetic-Scrolling-Plugin/
"scroll" in canvas , you need to handle 2 case :
bind event "mousedown" in this canvas and bind event "mouseup" in "mousedown" binding function.
bind event " DOMmouseup" in this canvas . User can wheel button in mouse to scroll.
To show canvas like a scroll
Redraw canvas
Use clip() in canvas. Re-set the rectangle of this clip to show your canvas
Please remove "position:absolute" in your css of canvas . And set height for your "div"
Hope it'll help you
The lines of the div are drawn. set line size to 0:
DIVofCanvas {
line-height: 0px;
}

Categories

Resources