How would I do this using javascript?
I want to be able to download the image with the CSS color overlay applied to it.
<div class="coloroverlay"></div>
.coloroverlay {
width: 1920px;
height: 1080px;
background-image: linear-gradient(to bottom,
rgba(255, 0, 187, 0.34),
rgba(255, 0, 187, 0.34)),
url(https://i.imgur.com/2jjLqzk.jpg);
}
Do what exactly?
You want to dynamically output that html using JS?
You want to dynamically output that css and html using JS?
Or perhaps you want to add an overlay to an actual image tag?
I can’t think what else you could mean.
I want to be able to download the image with the css color overlay applied to it.
I hope that makes it clearer.
I don’t think you can do that in the way that you would like. 
I would suggest, that you just take a screenshot instead. 
coothead
How would I apply this code to the javascript section?
background-image: linear-gradient(to bottom,
rgba(255, 0, 187, 0.34),
rgba(255, 0, 187, 0.34)),
url(https://i.imgur.com/2jjLqzk.jpg);
var img = new Image();
img.crossOrigin = "";
img.onload = draw; img.src = "https://i.imgur.com/2jjLqzk.jpg";
function draw() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d");
canvas.width = this.width;
canvas.height = this.height;
// filter
if (typeof ctx.filter !== "undefined") {
ctx.filter = "sepia(0.8)";
ctx.drawImage(this, 0, 0);
}
else {
ctx.drawImage(this, 0, 0);
// TODO: manually apply filter here.
}
document.querySelector("img").src = canvas.toDataURL();
}
You never explain clearly enough what you are attempting and so becomes difficult for anyone to help you.
The last line of that function you just posted has a querySelector looking for an image on the page but there is no image on the page; just the canvas element!
If perhaps you are trying to add a linear gradient to a canvas element then a quick google provides this link which achieves this result below.
var img = new Image();
img.crossOrigin = "";
img.onload = draw;
img.src = "https://i.imgur.com/2jjLqzk.jpg";
function draw() {
var canvas = document.querySelector("canvas"),
ctx = canvas.getContext("2d"),
grd = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
canvas.width = this.width;
canvas.height = this.height;
ctx.drawImage(this, 0, 0);
ctx.rect(0, 0, canvas.width, canvas.height);
// linear gradient
grd.addColorStop(0, ' rgba(255, 0, 187, 0.34)');
grd.addColorStop(1, 'rgba(55, 0, 187, 0.34');
ctx.fillStyle = grd;
ctx.fill();
}
Bear in mind I know nothing about canvas and even less about JS.
Hi there asasass,
here is @PaulOB’s suggestion, with a few modifications…
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>Canvas Example</title>
<style media="screen">
h1 {
text-align: center;
}
img {
display: block;
width: 60%;
height: auto;
margin: auto;
cursor: pointer;
}
</style>
</head>
<body>
<h1>
Image with overlay<br>
Right click to save.
</h1>
<script>
(function( d ) {
'use strict';
var wdh, hgt, canvas, ctx, grd, image,
img = new Image();
img.crossOrigin = '';
img.src = 'https://i.imgur.com/2jjLqzk.jpg';
img.onload = draw;
canvas = d.createElement( 'canvas');
canvas.setAttribute( 'width', 1920 );
canvas.setAttribute( 'height', 1080 );
function draw() {
ctx = canvas.getContext( '2d' );
wdh = canvas.width;
hgt = canvas.height;
ctx.drawImage( this, 0, 0 );
grd = ctx.createLinearGradient( wdh/2, 0, wdh/2, hgt );
grd.addColorStop( 0, 'rgba(255, 0, 187, 0.34)');
grd.addColorStop( 1, 'rgba(255, 0, 187, 0.5)' );
ctx.fillStyle = grd;
ctx.rect(0, 0, wdh, hgt);
ctx.fill();
image = d.createElement( 'img' );
image.setAttribute( 'id', 'overlaid-image' );
image.setAttribute( 'src', canvas.toDataURL() );
image.setAttribute( 'width', 1920 );
image.setAttribute( 'height', 1080 );
image.setAttribute( 'alt', 'overlaid image' );
d.body.insertBefore( image, d.querySelector( 'h1' ).nextSibling );
}
}( document ));
</script>
</body>
</html>coothead
I got it to work inside here:
https://htmledit.squarefree.com/
But
How would I get it to work inside jsfiddle?
I, personally, don’t use “jsfiddle” ,but
this is how it looks in “codepen” …
https://codepen.io/coothead/full/mdVgLxP
…and this is the code…
https://codepen.io/coothead/pen/mdVgLxP
You may find that a similar approach will
work for you in “jsfiddle”
You will just have to Suck it and See. 
coothead
Is this how you would set it up if linear gradient is not being used?
Added:
ctx.fillStyle = "rgba(255, 0, 187, 0.34)";
Deleted:
grd = ctx.createLinearGradient( wdh/2, 0, wdh/2, hgt );
grd.addColorStop( 0, 'rgba(255, 0, 187, 0.34)');
grd.addColorStop( 1, 'rgba(255, 0, 187, 0.34)' );
(function( d ) {
'use strict';
var wdh, hgt, canvas, ctx, image,
img = new Image();
img.crossOrigin = '';
img.src = 'https://i.imgur.com/2jjLqzk.jpg';
img.onload = draw;
canvas = d.createElement( 'canvas');
canvas.setAttribute( 'width', 1920 );
canvas.setAttribute( 'height', 1080 );
function draw() {
ctx = canvas.getContext( '2d' );
wdh = canvas.width;
hgt = canvas.height;
ctx.drawImage( this, 0, 0 );
ctx.fillStyle = "rgba(255, 0, 187, 0.34)";
ctx.rect(0, 0, wdh, hgt);
ctx.fill();
image = d.createElement( 'img' );
image.setAttribute( 'id', 'overlaid-image' );
image.setAttribute( 'src', canvas.toDataURL() );
image.setAttribute( 'width', 1920 );
image.setAttribute( 'height', 1080 );
image.setAttribute( 'alt', 'overlaid image' );
d.body.insertBefore( image, d.querySelector( 'h1' ).nextSibling );
}
}( document ));
Yes, that is correct.
How would I add this code:
To this one:
So I will be able to save the image the way the css is set up?
.wrap {
display: table;
/*block format for .inner margin-top*/
margin: 0 auto;
width: 1500px;
height: 1500px;
background-image: url(https://i.imgur.com/s2Al01l.png);
background-repeat: no-repeat;
background-size: 1500px 1500px;
}
.inner {
display: table;
/*block format for "p" top margin*/
width: 100%;
position: relative;
margin-top: 25px;
/*shift it all from here*/
/*this margin shifts the entire block*/
height: 357px;
}
.inner::after {
content: "";
position: absolute;
top: 92px;
width: 1500px;
height: 500px;
border: 100px solid #ccc;
border-width: 100px 0;
/*opacity:.8; */
}
<div class="wrap">
<div class="inner">
</div>
</div>
Hi there asasass,
instead of all that strange CSS code, why don’t you make
an image that will show the effect that you want to create.
I might then be able to think of a way to code it into the
existing canvas element.
coothead
But, it, the image would need to be saved the way it is set up.
No buts, i need to see how the overlay is meant
to look when applied to the 16:9 image…
https://i.imgur.com/2jjLqzk.jpg
…of the canvas element's dimensions.
Your fixed units CSS does not bear any relationship
to the canvas element image.
That is why I need to see a visual example of what
you’re trying to do.
I assume that you are wanting to save the end result
as new image.
coothead
Be able to save the image the way it is so I can make adjustments to it inside Microsoft paint.
You can use the print-screen key on your keyboard to copy an image of the screen, which you can then paste in to Microsoft paint.
This was suggested 4 days ago - post #4.
Aha, but all other options have to be explored and examined just in case there’s something useful there. That’s how some people work.
