Develop Reference

How can I display an image on top of a generated heatmap?

I am trying to use heatmap.js to create a heatmap, following the instructions from this post: How to render heatmap.js on an image?
All of my code is identical to the one at that example. Just a simple generated heatmap with a background image added in CSS. Please see this screenshot from that post :
But I want to display an image on top of the heatmap, so a foreground image instead of a background image.
I have tried using plotly, but unfortunately this is intended to run on an ESP-32, with SPIFFS, so I am extremely limited to space and processing power. Even after I used the partial bundle to get the file size down small enough, the web page just simply wouldn't load. I'd really prefer to use heatmap.js if possible anyways, since it has a much smaller footprint.
To further explain what I'm trying to do, I want to put this half-transparent image on top of the generated heatmap:
So the final desired result would look like this, displaying only the heatmap inside the transparent part of the foreground image:
All the code I am using is identical to the previously mentioned post, just a simple generated heatmap with a background image added in CSS. I also used this documentation here to build an example heatmap, https://www.patrick-wied.at/static/heatmapjs/docs.html
Is there any easy way to do this using HTML/CSS/JavaScript?

I don't know heatmap so cannot test this, but from the info given in the question if the placing of a background image works as shown then the placing of a foreground image should be possible.
What we do is style an after pseudo element on #heatmap, give it the correct dimensions, put it above the heatmap element using z-index and give it the required image as its background. The image should then appear to be sitting above the heatmap element - I assume obscuring part of it.
You need to make sure that the heatmap element is positioned so its after pseudo element knows where to position itself in relation.
#heatmap {
width: as you want
height: as you want
background-image: if you still want it to have one
any other styling you want heatmap to have
position: relative;
}
#heatmap::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1; /* make sure this is big enough - higher than the heatmap's z-index */
background-image: url(the image you want to be in the foreground);
background-size: cover; /* or contain depending on what you want */
background-repeat: no-repeat;
background-position: center center; /*or wherever you want it */
}
}

PaperJS canvas drawing area only in top left corner unless external action taken

I am trying to create an interactive svg tool which I hope will eventually be able to 'spot refine' SVGs using PaperJS.
Getting the groundwork done had been going well, but when I load my page (opening the html file locally with paperscript-full.js linked) I can get mouse to follow the cursor but only in a small square at the top left of the canvas. As soon as I use the inspect tool I am now free to use fly about (what I presume is based upon the border) - the entire canvas area.
Here is a fiddle which doesn't actually demonstrate the issue but has all my source code. I did this because I feel it would take too long to indent all of my code on here: fiddle
Also it is not strictly linked to the question but if anyone could tell me why my canvas grows in width every time I resize as well that would be very much appreciated

The issue you are encountering regarding mouse event being only captured in the top left corner is due to the fact that you are resizing canvas programmatically after Paper.js has been set up.
Because you are using PaperScript, Paper.js has already been set up when your code is run. There are at least 2 ways to work that around:
use JavaScript instead of PaperScript and first set canvas size, then bind Paper.js to the canvas manually using paper.setup() method.
control canvas size with CSS (I choose this way in following solution).
About the second part of your question, your canvas grows when you resize the window because of the canvas resize attribute which is implicitly set to true in your code.
Quoting from documentation:
resize="true": Makes the canvas object as high and wide as the Browser window and resizes it whenever the user resizes the window. When the window is resized, the size of your global.view is also automatically adjusted.
There are other improvements that can be done to your code, I directly included them in the following example:
body,
html {
width: 100%;
height: 100%;
margin: 0;
}
/* set canvas size and position with CSS */
main {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
canvas {
width: 90vw;
height: 90vh;
border: 1px solid;
}
#opts {
position: absolute;
right: 10vw;
bottom: 10vh;
}
<!-- dependencies -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- slider -->
<div id="opts">
<input id="tool" type="range" name="tool" min="1" max="10" value="1" step="1" />
</div>
<!-- wrap canvas for easier vertical alignment -->
<main>
<canvas id="canvas" resize></canvas>
</main>
<!-- paper.js code -->
<script type="text/paperscript" canvas="canvas">
// image should be drawn using paper Raster
var raster = new Raster({
source: 'https://picjumbo.com/wp-content/uploads/vineyards-on-italian-coast-free-photo-DSC04256-1080x720.jpg',
onLoad: function() {
// position image at view center
this.fitBounds(view.bounds.scale(0.5));
}
});
// create circle
var path = new Path.Circle({
// here you can directly use paper view object
center: view.center,
radius: 10,
// style can directly be set in constructor options
strokeColor: 'red',
strokeWidth: 3,
// disable matrix application for easier scale control
applyMatrix: false,
// make stroke width independant from scale
strokeScaling: false
});
// in paperscript context you can directly use named onMouseMove function
function onMouseMove(event) {
path.position = event.point;
}
// adapt path scale to slider value
$('#tool').change(function(event) {
path.scaling = this.value;
});
</script>

Full page size background image

I have a background image for my html page. I set it through css style:-
html{
margin-top:10px;
background: url(xxxxx.jpg) no-repeat center center fixed;
background-size: cover;
}
I want to know how I can change it dynamically it from the Javascript side.
I have tried something like:
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";
but that doesn't change the image.
Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).

The background image is not really tied to the html tag but the body tag.
Try:
body
{
background-image: url(xxxxx.jpg);
}
And the script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If this works as expected (you see zzzzz.jpg, not xxxxx.jpg) then you're ready to fix the rest of the CSS code.
EDIT: tested the code and fixed a bug. You must assign backgroundImage = "url('zzzzz.jpg')", not simply the filename as I've written before.
As an example, this works perfectly, all you need are two images (red.jpg and blue.jpg):
<html>
<head>
<style>
body
{
background-image: url('red.jpg');
}
</style>
</head>
<body>
<script>
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
</script>
</body>
</html>
EDIT 2:
The rest of the CSS must not change, so you'll still have:
body
{
margin-top: 10px;
background: url('xxxxx.jpg') no-repeat center center fixed;
background-size: cover;
}
The background property is a compound:
background: url('xxxxx.jpg') no-repeat center center fixed;
^ ^ ^ ^
URL R H V
URL: the image url
R: repetition
H: horizontal alignment
V: vertical alignment
With
background-image: url('xxxxx.jpg')
you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.

To access the html element you can use document.documentElement:
document.documentElement.style.backgroundImage = "url('yyy.jpg')";
To change it every X seconds you can use setInterval() and have your images in an array.

Changing picture on mousemove in javascript

I came across this site, and wanted to implement something similar to their picture changing logo whilst the mouse is moving into my own site. I'm not sure if it uses jQuery as the page source is a little confusing, is there anyway for me to do this within javascript?

Actually, that site is using a background sprite, and display each logo changing the position of the sprite.
This is the sprite image for the logo:
http://w00tmedia.net/wp-content/themes/w00t/images/citrus-logos.png
You should do some math based on the sprites layout and how 'quickly' you want to change the image.
See this,
http://docs.jquery.com/Tutorials:Mouse_Position
And then change the element's background position.

You could also accomplish the same effect using css if you have a div or some other block element instead of an image tag.
#logo {
background: url('logo.png');
width: 200px;
height: 45px;
}
#logo:hover {
background: url('logo_hover.png');
}

CSS: Making Background Image fade slowly

I am working on a legacy code here, and cannot use jQuery, CSS3 or HTML5.
I am using a background image for an input field in HTML. I am trying to achieve some sort of animation here, where the image appears initially and fades away slowly after 'n' seconds.
The sample CSS code that I have is:
.acceptValue {
background-image: url('../../images/accept.gif');
background-repeat: no-repeat;
background-position: right;
padding-right: 20px;
}
I want the above CSS property to be applied for 'n' seconds and then it should disappear.
Is there a way I can get this working in IE7 and IE8? I want something like SetTimeout in CSS definition where the image (accept.gif) appears just for a few seconds.
Please let me know.