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;
}
Related
I have been trying to make an application like open-board. For that, I am using canvas API. The problem is that the lines are drawn below the clicked point. I have already subtracted offset top and offset left but still facing the issue.
Also, one thing that I have noticed, the distance between the clicked point and the drawn figure increases as the clicked point goes farther away from the origin. Like this: image
here is my code:
canvas.addEventListener("mousedown",(e)=>{
let x = drawArea.offsetTop
let y = drawArea.offsetLeft
if(lineToolSelected == false)
{
lineToolSelected = true;
tool.beginPath()
tool.moveTo(e.clientX-y,e.clientY-x)
}else if( lineToolSelected == true){
lineToolSelected = false
tool.lineTo(e.clientX-y,e.clientY-x)
tool.stroke()
}
})
.draw-area{
/* position: fixed; */
position: absolute;
top:0rem;
left:0rem;
height: 175px;
width: 350px;
background:white;
}
.draw-area-cont{
/* position: fixed; */
position: absolute;
top:10rem;
left:2rem;
width:74rem;
background:#eeeded;
height: 37rem;
overflow: hidden;
/* z-index:1; */
}
#canvas{
/* position: fixed; */
height: 100%;
background-color: white;
width: 100%;
color: white;
}
<div class="draw-area-cont">
<div class="draw-area">
<canvas id="canvas"></canvas>
</div>
</div>
If anyone encounters the same problem, I did this:
var scale = 2;
canvas.height = canvas.offsetHeight * scale;
canvas.width = canvas.offsetwidth * scale;
I don't think you even need to multiply with scale, just doing this should work too:
canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetwidth;
I multiplied with scale to increase the resolution of the image.
function drawAll() {
// Upper zone, 8 grey transparent buttons
let canvas0 = document.getElementById("layer0");
canvas0.width = 1000;
canvas0.height = 100;
let bandeau = canvas0.getContext("2d");
bandeau.fillStyle = "rgba(128,128,80,0.3)";
for (var i = 0; i < 8; i++) {
bandeau.beginPath;
bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
bandeau.fill();
}
// Lower zone, a red rectangle partially under the buttons
let canvas1 = document.getElementById("layer1");
canvas1.width = 1000;
canvas1.height = 1000;
let dessin = canvas1.getContext("2d");
dessin.fillStyle = "red";
dessin.fillRect(30, 50, 800, 200);
canvas0.style.visibility = "visible";
canvas1.style.visibility = "visible";
}
drawAll()
body {
background-color: rgb(249, 249, 250);
}
.container {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
z-index: -10;
}
.scrollable {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
<div class="container">
<canvas id="layer0" class="scrollable"></canvas>
<canvas id="layer1" class="fixed"></canvas>
</div>
Hello
I'm stuck on a superposition problem of two canvas. Here is a simplified example. Note that in the real application, buttons and drawings are far more complicated and that I want to keep the structure with html5 / css / javascript.
I suppose that I miss something in the css to succeed to have these two canvas superposed, buttons partially covering the red rectangle, but what ?
Thanks if somebody can help.
The problem is that <body> doesn't have any height, which makes the .container height of 100% equally zero.
Absolutely positioned elements do no contribute to their parent's height. As soon as you start giving .container an actual height, you can see its content. In the example below, I went for 100vw and 100vh for width and height, but since your canvases are 1000px wide, you could also use that or any other value.
An absolutely positioned element no longer exists in the normal document layout flow. Instead, it sits on its own layer separate from everything else.
Source: MDN Web Docs
The other option is to remove overflow: hidden; from .container and show everything outside of it.
function drawAll() {
// Upper zone, 8 grey transparent buttons
let canvas0 = document.getElementById("layer0");
canvas0.width = 1000;
canvas0.height = 100;
let bandeau = canvas0.getContext("2d");
bandeau.fillStyle = "rgba(128,128,80,0.3)";
for (var i = 0; i < 8; i++) {
bandeau.beginPath;
bandeau.arc(50 + 110 * i, 50, 45, 0, 2 * Math.PI);
bandeau.fill();
}
// Lower zone, a red rectangle partially under the buttons
let canvas1 = document.getElementById("layer1");
canvas1.width = 1000;
canvas1.height = 1000;
let dessin = canvas1.getContext("2d");
dessin.fillStyle = "red";
dessin.fillRect(30, 50, 800, 200);
canvas0.style.visibility = "visible";
canvas1.style.visibility = "visible";
}
drawAll()
body {
background-color: rgb(249, 249, 250);
}
.container {
position: relative;
overflow: hidden;
z-index: -10;
height: 100vh;
width: 100vw;
}
.scrollable {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.fixed {
position: absolute;
top: 0px;
left: 0px;
z-index: 2;
}
<div class="container">
<canvas id="layer0" class="scrollable"></canvas>
<canvas id="layer1" class="fixed"></canvas>
</div>
I've made a simple demo here: https://jsfiddle.net/bwmgazfx/1/
The line of CSS works in Chrome and IE11.
*, html { cursor: none !important; }
In Chrome and IE11 the cursor is hidden, but in Firefox (version 60)the cursor sometimes hides when you hold the mouse button down but otherwise stays visible. I know that cursor: none; works in Firefox but I can't seem to track down the problem as to why it's not being hidden.
My question is, why is the cursor not hidden in Firefox 61?
Your CSS is correct, however, some browsers (your case FireFox) will still show the cursor if the document height is not filled 100%
Adding below to your CSS will fix this.
html, body {
height: 100%;
}
var x = null;
var y = null;
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousemove', onMouseUpdate, false);
document.addEventListener('mousedown', onClickMouse, false);
document.addEventListener('mouseup', onReleaseMouse, false);
var $mousePointer = document.getElementById('mouse-pointer');
function onMouseUpdate(e) {
x = e.pageX;
y = e.pageY;
$mousePointer.style.top = y + "px";
$mousePointer.style.left = x + "px";
}
function onClickMouse(e) {
$mousePointer.style.transform = "matrix(0.75, 0, 0, 0.75, 0, 0)";
}
function onReleaseMouse(e) {
$mousePointer.style.transform = "matrix(1, 0, 0, 1, 0, 0)";
}
html, body {
height: 100%;
}
*, html {
cursor: none;
}
body {
background-image: url(tile.jpg);
background-repeat: repeat;
}
#mouse-pointer {
width: 12px;
height: 12px;
position: absolute;
background-color: red;
border-radius: 50%;
transform: matrix(1, 0, 0, 1, 0, 0);
transition: transform 0.4s;
}
<div id="mouse-pointer"></div>
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">😃</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
Im trying to build a game where enemies jump out of the water and you fire water at them...
When the user clicks to fire I want the img src to point in the direction of the click, to achieve what I have so far I have css and js script (code below) however it looks to static, I feel having the water point in the direction of the users input would help a lot however Im not sure how to achieve this?
//bind to gun events
this.playfield.on('gun:out_of_ammo',_.bind(function(){this.outOfAmmo();},this));
this.playfield.on('gun:fire',_.bind(function(){
this.flashScreen();
},this));
...
flashScreen : function(){
$(".theFlash").css("display","block");
setTimeout(function(){
$('.theFlash').css("display","none");
},400);
}
CSS
.theFlash{
background-color : transparent;
width:900px;
height:500px;
position:relative;
margin:0 auto;
z-index:10;
display:none;
}
I put together an example below that will hopefully help you out.
You just have to specify the source from where the shoot is fired (sourceX,sourceY), calculate the angle to where the mouse is clicked (done below, so should just be to copy/paste) and adjust the transform: rotate(Xdeg); to the new angle.
Make sure to set the orgin in css with transform-origin, so that the flame rotates around the source and not the flame itself.
Try it out at the bottom.
var game,
flame,
sourceX = 310,
sourceY = 110;
window.onload = function() {
game = document.getElementById('game');
flame = document.getElementById('flame');
game.addEventListener('click', function(e) {
var targetX = e.pageX,
targetY = e.pageY,
deltaX = targetX - sourceX,
deltaY = targetY - sourceY,
rad = Math.atan2(deltaY, deltaX),
deg = rad * (180 / Math.PI),
length = Math.sqrt(deltaX*deltaX+deltaY*deltaY);
fire(deg,length);
}, false);
};
function fire(deg,length) {
flame.style.opacity = 1;
flame.style.transform = 'rotate(' + deg + 'deg)'
flame.style.width = length + 'px';
setTimeout(function() {
flame.style.opacity = 0;
},300);
};
#game {
position: relative;
width: 400px;
height: 200px;
background-color: #666;
overflow: hidden;
}
#source {
border-radius: 50%;
z-index: 101;
width: 20px;
height: 20px;
background-color: #ff0000;
position: absolute;
left: 300px;
top: 100px;
}
#flame {
width: 300px;
height: 3px;
background-color: #00ff00;
position: absolute;
left: 310px;
top: 110px;
opacity: 0;
transform-origin: 0px 0px;
transform: rotate(180deg);
transition: opacity .2s;
}
<div id="game">
<div id="source">
</div>
<div id="flame">
</div>
</div>
I would not recommend building games in this manner, Canvas and SVG are the preferred methods of building browser games, with that said it can be done.
Try this
https://jsfiddle.net/b77x4rq4/
$(document).ready(function(){
var middleOfElementTop = 250; // margin from top + half of height
var middleOfElementLeft = 125; // margin from left + half of width
$("#main").mousemove(function(e){
var mouseX = e.offsetX;
var mouseY = e.offsetY;
var angle = Math.atan2(mouseY - middleOfElementTop, mouseX - middleOfElementLeft) * 180 / Math.PI;
$(".box").css({"transform": "rotate(" + angle + "deg)"})
})
});