drawImage() is not working - javascript

When I open the html file in chrome, I only see the background, I open the consol and I see "hi" ever frame but I cant see the Image that I "drew" using the drawImage() `
var ctx = document.querySelector('Canvas').getContext('2d')
function draw() {
ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0)
window.requestAnimationFrame(draw)
console.log('hi')
}
draw()
#Canvas {
width: 100%;
height: 100%;
background: url(Pictures/Background.jpg);
margin: -8px;
}
<canvas id='Canvas'></canvas>
<div style='display:none;'>
<img id='Mario' src='Pictures/Mario.png'>
</div>

Here's your problem:
ctx.drawImage(document.getElementById('Mario'), 50, 61, 0, 0);
You've got your image width and height set to 0. Switch it to this instead:
ctx.drawImage(document.getElementById('Mario'), 0, 0, 50, 61);

Related

Matching Wrapper+Canvas+Div to an Image's Size

I'm using heatmap.js in Google Apps Script and I am trying to resize the heatmap canvas (where I can actually plot points) to fit an image. How can I change the javascript or styling to make this work?
CODE: https://jsfiddle.net/nateomardavis/51h2guL9/
The wrapper has a black border.
The heatmap div has a blue border.
The canvas has a red border.
How it Should Work: I should be able to mark the heatmap anywhere on the image. The wrapper, heatmap div and canvas should all be sized based on the size of the image.
How it Currently Works: I can only mark the heatmap inside the blue/black border. My javascript resizes the canvas to fit the image, but not the bounds of the heatmap.
What I've Tried: You can see in the fiddle how I've tried to change what the javascript is resizing (lines 88-90).I also thought about using the using the image as the background-image of the heatmap div but the sizing wasn't right and I wanted to be able to save the heatmap and image as one layer (for printing/saving). I also tried changing the size of the image (line 101) but anything above 55% would cut the image off.
The screenshot below is just for reference, but the full working code is in the fiddle. I have it all under HTML because that's how it works in Google Apps Script.
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript" src="https://www.patrick-wied.at/static/heatmapjs/assets/js/heatmap.min.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
}
html {
color: #333;
font-family: sans-serif;
font-size: 16pt;
font-weight: 100;
line-height: 1.5em;
}
.wrapper {
width: 100%;
height:100%;
background:rgba(0,0,0,.03);
border:3px solid black;
}
.heatmap {
width:100%;
height:100%;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: relative;
border:3px solid blue;
}
.canvas {
border:3px solid red;
}
</style>
</head>
<body>
<button class="clear">Clear</button>
<button onclick="printPage()" class="print-btn no-print" style="">Print</button>
<p id="coords"></p>
<div id="wrapper" class="wrapper"> <!-- black box on web app-->
<div id="heatmap" class = "heatmap" style="position: relative;"> <!-- blue box on web app-->
<canvas id="canvas" class="canvas"></canvas> <!-- red box on web app-->
</div>
</div>
<script>
//CREATE HEATMAP
window.onload = function() {
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
gradient: {
'.25': 'black',
'.5': 'red',
'.75': 'white'
},
radius: 20
});
document.querySelector('.wrapper').onclick = function(ev) {
heatmapInstance.addData({
x: ev.layerX,
y: ev.layerY,
value: 1
});
};
document.querySelector('.clear').onclick = function() {
//heatmapInstance._renderer._clear();
heatmapInstance.setData({data:[]});
};
//RESIVE CANVAS TO FIT IMAGE
//http://jsfiddle.net/6ZsCz/1135/
var canvas = document.getElementById('canvas'); //v1
//var canvas = document.getElementById('heatmap'); //v2
//var canvas = document.getElementById('wrapper'); //v3
var ctx = canvas.getContext('2d');
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
var imageObj = new Image();
imageObj.onload = function() {
canvas.width = imageObj.width; // version 2
canvas.height = imageObj.height; // version 2
ctx.drawImage(imageObj,0,0); // version 2
//ctx.drawImage(imageObj, 0, 0, imageObj.width * 0.5, imageObj.height * 0.5); //version 1
};
imageObj.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png';
};
//MOUSE COORDINATES
//works inside heatmap
function getCursorPosition(canvas, event) {
const rect = canvas.getBoundingClientRect()
const x = event.clientX - rect.left
const y = event.clientY - rect.top
var coor = "X coords: " + x + ", Y coords: " + y;
document.getElementById("coords").innerHTML = coor;
}
const canvas = document.querySelector('.heatmap')
canvas.addEventListener('mousedown', function(e) {
getCursorPosition(canvas, e)
})
function printPage() {
window.print();
}
</script>
</body>
</html>
After lots of tinkering, I was able to figure it out: https://jsfiddle.net/nateomardavis/p1kwrhmv
I used img and gave it a background-image with CSS.
I then set the heatmap layer to relative and the image layer to absolute using the solution HERE.
Last, I then set the image layer css using the method outlined HERE.
.heatmap {
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 300%; /*if the image is bigger than screen, this is needed */
position: relative;
}
.backgroundIMG {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Soccer_Field_Transparant.svg/1200px-Soccer_Field_Transparant.svg.png');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
width: 100%;
height: 0;
padding-top: 151.33%;
}

Firefox not hiding cursor using cursor: none;

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>

make a shape in canvas appear after 5s

I have 2 circles in the html canvas element, which I drew with Javascript. I want to make the first circle appear after 5 seconds.
I was wondering if you need to do this with Javascript and if so, how do you do this?
See the code for reference:
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(30, 75, 20, 0,Math.PI*2);
ctx.stroke();
ctx.closePath;
ctx.beginPath();
ctx.arc(100,75,20,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
#canvas1{
width: 300px;
height: 150px;
border: 1px solid black;
margin-top: 100px;
}
<canvas id="canvas1"></canvas>
use setTimeout method when the shape is created
setTimeout(function() {
ctx.beginPath();
ctx.arc(30, 75, 20, 0,Math.PI*2);
ctx.stroke();
ctx.closePath;
ctx.beginPath();
ctx.arc(100,75,20,0,Math.PI*2);
ctx.stroke();
ctx.closePath();
},5000)
You can use global function setTimeout, e.g. like this:
var c = document.getElementById("canvas1")
var ctx = c.getContext("2d")
function circle(a1, a2, a3, a4) {
ctx.beginPath()
ctx.arc(a1, a2, a3, a4 ,Math.PI*2)
ctx.stroke()
ctx.closePath()
}
setTimeout(circle, 5000 /*time in ms*/, 30, 75, 20, 0)
circle(100, 75, 20, 0)
#canvas1{
width: 300px;
height: 150px;
border: 1px solid black;
margin-top: 100px;
}
<canvas id="canvas1"></canvas>

How to navigate to a specific object location programatically in fabricjs

When I have a bunch of objects on canvas at different locations and my web page has scrollbars for canvas area, I have navigation buttons for next/prev which makes the respective object as active by calling canvas.setActiveObject() but I need to auto scroll to that specific location.
I haven't found anything on the html canvas context to achieve that.
canvas.getContext().moveTo(x, y); moves the pointer logically but I need to move physically.
function gonext(idx) {
var objs = fcanvas.getObjects();
fcanvas.setActiveObject(objs[idx]);
}
var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
left: 10,
top: 1100,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="gonext(1)">Next</button>
<div >
<canvas id="mycanvas" style="border:1px solid black"></canvas>
</div>
Here is the jsfiddle in action, clicking on NEXT will make the next object active but I also need to scroll down to that object
Any direction on this one?
Maybe you have to adjust offset in your page, but a simple window.scrollTo doens't help you?
Please try the executable snippet below:
function gonext(idx) {
var objs = fcanvas.getObjects();
var obj = objs[idx];
fcanvas.setActiveObject(obj);
window.scrollTo(0, obj.top);
}
var fcanvas = new fabric.Canvas("mycanvas");
fcanvas.setWidth(500);
fcanvas.setHeight(1200);
var rect = new fabric.Rect({
left: 10,
top: 10,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.setActiveObject(rect);
var rect = new fabric.Rect({
left: 10,
top: 1100,
width: 50,
height: 50,
fill: '#FF454F'
});
fcanvas.add(rect);
fcanvas.renderAll();
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<button onclick="gonext(1)">Next</button>
<div >
<canvas id="mycanvas" style="border:1px solid black"></canvas>
</div>
The issue I had was, canvas was inside a nested DIVs, I had do use.scrollTop on my root div to fix the issue

multiple canvas as buttons with onclick event

I'm having really big problems with canvas code that I'm using only 1 time in the page (in logo) working fine, and that I'm trying to use it as buttons for menu and here is the problem, I don't know really what's im doing wrong, hope some of u help me.
it's the code that I'm using for the logo and is working fine:
HTML CODE:
<html>
<head>
<title>canvas</title>
</head>
<body>
<div id="container">
<div id="logo">
<canvas style="" width="800" id="broken-glass"></canvas>
<h1 style="color: rgba(250, 250, 250, 0.95);" id="logo-title">Canvas</h1>
</div>
<script type="text/javascript">
(function() {
var isCanvasSupported = function () {
var elem = document.createElement('canvas');
return !!(elem.getContext && elem.getContext('2d'));
};
if( isCanvasSupported() ) {
var canvas = document.getElementById('broken-glass'),
context = canvas.getContext('2d'),
width = canvas.width = Math.min(800, window.innerWidth),
height = canvas.height,
numTriangles = 100,
rand = function(min, max){
return Math.floor( (Math.random() * (max - min + 1) ) + min);
};
window.drawTriangles = function(){
context.clearRect(0, 0, width, height);
var hue = rand(0,360);
var increment = 80 / numTriangles;
for(var i = 0; i < numTriangles; i++) {
context.beginPath();
context.moveTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.lineTo(rand(0,width), rand(0,height) );
context.globalAlpha = 0.5;
context.fillStyle = 'hsl('+Math.round(hue)+', '+rand(15,60)+'%, '+ rand(10, 60) +'%)';
context.closePath();
context.fill();
hue+=increment;
if(hue > 360) hue = 0;
}
canvas.style.cssText = '-webkit-filter: contrast(115%);';
};
document.getElementById('logo-title').style.color = 'rgba(250, 250, 250, 0.95)';
drawTriangles();
var el = document.getElementById('logo');
el.onclick = function() {
drawTriangles();
};
}
})();
</script>
</div>
</body>
</html>
and it's CSS CODE:
#broken-glass
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
}
#logo h1
{
text-align: center;
font-weight: 700;
width: 100%;
color: #000;
position: absolute;
left: 0px;
-moz-user-select: none;
cursor: pointer;
margin-top: 27px;
font-size: 63px;
line-height: 1.4;
top: 0px;
margin-bottom: 5px;
text-rendering: optimizelegibility;
font-family: Calibri,"PT Sans","Trebuchet MS","Helvetica Neue",Arial;
}
the big problem comes when i change the id's (#) to classes (.) and the "id" tag to "class" tag in the html, the canvas is overlapped... the text of h1 tag is out of the canvas... and just the hell of problems, can someone tell me what I'm doing wrong?, how to fix it, I'm trying it during hours...
too much thanks in advance!.
you may try putting an !important in every code in your css.
example:
text-align: center !important;
font-weight: 700 !important;
this fixed my problem before, hopefully it will fix yours also.

Categories

Resources