We Keep Coding

How to make an image appear on click, exactly where the click occurred?

I am trying to add an image when an area of a canvas is clicked. I would prefer to use jquery but vanilla js or css is fine.
The problem is, I can add a click function using click and append, however it does not appear in the exact place i clicked, and this is what i want to happen.
also i am trying to add a touch event to the click event, and I get the error "expected one argument but got two"
(I am using a typescript / scss / pug preprocessor, gulp compiler)
i tried to randomize the x and y coordinates, however this just randomized them and didn't "bind" them to my click event. i also did attempt this with css using the :Active ~ selector, however it did not appear where the user was active, only at the top left of the container it's in. so i don't know if CSS is the way to go.
$("#clickimage").click(function(){
$('<img src="https://www.placecage.com/c/200/300">').appendTo($("#clickimage"));
});
$('#clickimage').ontouchstart = ();
css looks like:
#clickimage {
display: none;
}
attempted css:
:active ~ #clickimage{
display: block;
}
html
<canvas width="632" height="418" id="clickimage"></canvas>

Maybe something like this in vanilla JS will help you - the trick is using position fixed with offsetX/Y.
function paintImage(e){
document.querySelector('#wrapper').innerHTML += `<img src="https://www.placecage.com/c/200/300" style="left:${e.offsetX}px;top:${e.offsetY}px">`;
}
document.addEventListener('click', paintImage);
img {
position: fixed;
display: block;
background: #f00;
width: 100px;
height: 100px;
}
#wrapper {
width: 100%;
height: 100vh;
}
<div id="wrapper"></div>

CSS styles are applied and displayed but JS doesn't recognize the CSS applied

Something weird is going on and I'm not sure what it is. I created a bunch of elements and I want to get the width of my progress bar so I can work with it in my JS code.
In my JS I do:
var bar = document.getElementById('progressBar');
console.log(bar.style.width); //empty string
however in my CSS I have
#progressBar{
width: 600px;
border: 2px solid black;
}
and I can clearly see the 600px container and the border around it in the browser, but for some reason, JS doens't know about these CSS settings.
Any ideas what the problem might be?
EDIT: This is different from the suggested duplicate - the problem is not that I don't know how to the get the value, the problem is that the style.value doesn't get me what I expect.

That is correct behaviour.
The style property of a DOMElement is responsible for inline styles, not the actual computed values. To get the width, use getClientRects or getBoundingClientRect.
e.g.
var bar = document.querySelector('.bar');
console.log(bar.style.width); // empty string
console.log(bar.getBoundingClientRect().width); // 100px
.bar {
width: 100px;
height: 20px;
background: blue;
}
<div class='bar'></div>
You may also be interested in:
How do I get a computed style?

Issue with changing the background image using the .css() jQuery method

I am using the .css() jQuery method to change the background of a div with an ID of "background". The method accepts as parameters the property name and the value you want to set for it. Therefore, my code is as follows:
function changeBackground() {
$("#background").css("background-image", "url(../assets/background2.jpg)");
}
window.onload = function() {
window.addEventListener("click", changeBackground);
};
Originally, background-image had a value of url(../assets/background.jpg). The curious thing is that it works fine in the Chrome session that my editor (Brackets.io) uses as Live Preview, but it doesn't when I open Chrome normally or I use Firefox and Opera.
EDIT: The issue was with the path: instead of temporarily changing the value in the css sheet (what I thought the code did), apparently jQuery itself makes sure the background source changes. This means that the path for the image must be set relative to the javascript file—in this case url(assets/background2.jpg) instead of url(../assets/background2.jpg). I'd like anyone more knowledgeable or better spoken to correct me if needed.
However, another issue arose—the rest of the styling for the background image (see below) gets completely ignored after jQuery changed its source. How can you fix this?
#background {
background-image: url(../assets/background.jpg);
background-attachment: fixed;
background-position: center;
background-size: cover;
position: fixed;
top: 0em;
left: 0em;
height: 100%;
width: 100%;
margin: 0em;
}

Use ' instead of " :
$("#background").css("background-image", 'url(../assets/background2.jpg)');
If doesn't work, try this
$("#background").css({backgroundImage : 'url(../assets/background2.jpg)'});
or this
$("#background").css('background', 'url("../assets/background2.jpg")');

add class .new-background
// css
.new-background {
background-image: url(../assets/background2.jpg);
}
and
// js
function changeBackground() {
$("#background").addClass('new-background');
}
$(window).click(changeBackground);

Add a div on the left side of a any page

I developing a plugin and want to add on any page a div on the left side, like a console.
I saw CSS styles, but testing the plugin on greasymonkey not always show me the div, how can i do?
The CSS code that I'm using is this:
var div_console = document.createElement("div");
div_consola.id = "div_consola";
div_consola.style.cssText = "overflow:scroll;
z-index:300;position:fixed;left:0px; width: auto;
height: 100%; border: solid 1px #e1e1e1;
vertical-align: middle; background: #ffdab9;text-align: center;";
var body = document.getElementsByTagName('body')[0];
body.appendChild(div_consola);
So, when loading any page I add with Javascript this div and then populate with data.
Any help?
Thank you!!

A couple of things:
You have typos in the variable name. I assume you mean div_console and not div_consola
You are assuming that a z-index of 300 will suffice, which may or may not be true. A page could choose to implement a z-index of 301.
Is the rest of your css being applied to the div you wish to affect?

You have specified
overflow: scroll;
width: auto;
Depend of your browser, maybe your div have an undefined size and the scrollbar which pop hide your div.
That's what happened to me when I tried your code on jsFiddle.
Here is the result when I change it to
overflow : hidden;
width: 50px;
JsFiddle
Edit : If it doesn't resolve your problem, could you please precise the conditions (browser, etc) when it doesn't work ?

div_consola.id = "div_consola";
div.setAttribute("id", "div_consola"); <------ Try using setAttribute to set Id.
EDIT:
Using same Id name and variable name is also one of the issue.
When I changed the variable name in your code, it worked fine.
var div_consola = document.createElement("div");
var div = document.createElement("div"); <------ variable name changed

How do you create a frozen/non scrolling window region using javascript?

Am curious to know how you create a frozen/non-scrolling regions on a webpage using javascript! like the one used by Stackoverflow when they alert you of the badge you have earned with a "X" close button!
Gath

You don't need to use javascript, you can do it with CSS just by setting the CSS property "display" to "fixed". You can of course do this with javascript if you like, like so:
var element = ...code to get the element you want...;
element.style.display = 'fixed';

That's using CSS's position: fixed
body {
margin-top: 20px;
}
#banner {
position: fixed;
height: 20px;
}