Related
I want to take a picture from a webcam and save it in ImageField. I've seen some results related to this question, but I'm not able to understand how they work. For example:
How can I capture a picture from webcam and store it in a ImageField or FileField in Django?
My HTML form
<div class="contentarea">
<div class="Input">
<form method="POST" name="inputForm" enctype='multipart/form-data'>
{% csrf_token %}
<div id="camera" class="camera">
<video id="video">Video stream not available.</video>
<button id="startbutton" type="button">Take photo</button>
<input id="webimg" value="" name="src" type="text" style="display: none;">
<canvas id="canvas">
</canvas>
</div>
<br>
<div>
<img id="photo" alt="your image">
</div>
<br>
<button type="submit" class="btn btn-outline-warning" id="submit">Save</button>
</form>
</div>
<img src="{{ path }}" alt="The screen capture will appear in this box.">
Javascript
(function() {
var width = 320;
var height = 0;
var streaming = false;
var video = null;
var canvas = null;
var photo = null;
var startbutton = null;
function startup() {
video = document.getElementById('video');
canvas = document.getElementById('canvas');
photo = document.getElementById('photo');
startbutton = document.getElementById('startbutton');
navigator.mediaDevices.getUserMedia({video: true, audio: false})
.then(function(stream) {
video.srcObject = stream;
video.play();
})
.catch(function(err) {
console.log("An error occurred: " + err);
});
video.addEventListener('canplay', function(ev){
if (!streaming) {
height = video.videoHeight / (video.videoWidth/width);
if (isNaN(height)) {
height = width / (4/3);
}
video.setAttribute('width', width);
video.setAttribute('height', height);
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
streaming = true;
}
}, false);
startbutton.addEventListener('click', function(ev){
takepicture();
ev.preventDefault();
}, false);
clearphoto();
}
function clearphoto() {
var context = canvas.getContext('2d');
context.fillStyle = "#AAA";
context.fillRect(0, 0, canvas.width, canvas.height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
}
function takepicture() {
var context = canvas.getContext('2d');
if (width && height) {
canvas.width = width;
canvas.height = height;
context.drawImage(video, 0, 0, width, height);
var data = canvas.toDataURL('image/png');
photo.setAttribute('src', data);
} else {
clearphoto();
}
}
window.addEventListener('load', startup, false);
})();
CSS
#video {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width:320px;
height:240px;
}
#photo {
border: 1px solid black;
box-shadow: 2px 2px 3px black;
width:320px;
height:240px;
}
#canvas {
display:none;
}
.camera {
width: 340px;
display:inline-block;
}
.output {
width: 340px;
display:inline-block;
}
#startbutton {
display:block;
position:relative;
margin-left:auto;
margin-right:auto;
bottom:32px;
background-color: rgba(0, 150, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.7);
box-shadow: 0px 0px 1px 2px rgba(0, 0, 0, 0.2);
font-size: 14px;
font-family: "Lucida Grande", "Arial", sans-serif;
color: rgba(255, 255, 255, 1.0);
}
.contentarea {
font-size: 16px;
font-family: "Lucida Grande", "Arial", sans-serif;
width: 760px;
}
My Views.py
#login_required(login_url='accounts:login')
def image_upload(request, slug):
return_obj = get_object_or_404(Return, slug=slug)
if request.method == 'POST' :
path = request.POST["src"]
image = NamedTemporaryFile()
image.write(urlopen(path).read())
image.flush()
image = File(image)
name = str(image.name).split('\\')[-1]
name += '.jpg'
image.name = name
obj = ReturnImage.objects.create(image=image,slug=return_obj.slug)
obj.save()
return redirect("return_module:index")
context = {
'returnn': returnn,
}
return render(request,"return/image_upload.html",context)
As a matter of fact, I tried to understand all the code in the link, but somehow I could not achieve what I wanted to do. I would be very happy if you could help me with this. Thanks for your help.
This code will not works in a server because you are trying to access the local temporary file generated by browser. So your browser generate the file and save on your disk - then the server find on server disk a file with same name on temporary file, that does not work.
My suggestion is you use ajax to send the file to server route (please have a look on fetch for example or include jQuery on your project). Using fetch you can send a post request including the file and then save it on server disk/database/whatever you want.
Documentation of file upload in Django:
https://docs.djangoproject.com/en/4.0/topics/http/file-uploads/
Fetch example sending a file:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#uploading_a_file
JQuery:
https://api.jquery.com/jquery.ajax/
Basically lol cant add videos here but with the default html color picker you can move the color picker dot if mouse is down off the colors box boundries and it moves agains the edge of the boundries but with mine it just stops moving and doesnt do good when i move the mouse fast.
I am trying to create a custom color picker where you have a slider of colors, then you have the box of the color selected and you can change the whiteness and darkness of it like this here (Like adobe xdcc color picker):
Adobe xdcc color picker example
[The code below creates this here][2]
You can drag the little color picker circle and it changes the selected color but when using canvas I can't have to color picker circle moving around the edges when the mouse leaves the canvas which i would like to change.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<h2>Let's Create a Color Picker</h2>
<div class="container">
<canvas id="color-picker"></canvas>
<div class="info">
<h3>Selected Color</h3>
<div class="selected"></div>
</div>
</div>
</body>
</html>
CSS:
html, body {
width: 100%;
height: 100%;
font-family: Oxygen, sans-serif;
text-align: center; }
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
#color-picker {
border: .5px solid rgba(15, 15, 15, 0.2); }
.info {
width: 12em;
display: flex;
margin-left: 4em;
flex-direction: row;
justify-content: space-between; }
.selected {
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid rgba(15, 15, 15, 0.2); }
JS:
class Picker {
constructor(target, width, height) {
this.target = target;
this.width = width;
this.height = height;
this.target.width = width;
this.target.height = height;
// Get context
this.context = this.target.getContext("2d");
// Circle
this.pickerCircle = { x: 10, y: 10, width: 10, height: 10 };
this.listenForEvents();
}
draw() {
}
build() {
let gradient = this.context.createLinearGradient(0, 0, this.width, 0);
//Color Stops
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
//Fill it
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Apply black and white
gradient = this.context.createLinearGradient(0, 0, 0, this.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Circle
this.context.beginPath();
this.context.arc(this.pickerCircle.x, this.pickerCircle.y, this.pickerCircle.width, 0, Math.PI * 2);
this.context.strokeStyle = "black";
this.context.stroke();
this.context.closePath();
}
listenForEvents() {
let isMouseDown = false;
const onMouseDown = (e) => {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
isMouseDown = true;
}
const onMouseMove = (e) => {
if(isMouseDown) {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
}
const onMouseUp = () => {
isMouseDown = false;
}
//Register
this.target.addEventListener("mousedown", onMouseDown);
this.target.addEventListener("mousemove", onMouseMove);
this.target.addEventListener("mousemove", () => this.onChangeCallback(this.getPickedColor()));
document.addEventListener("mouseup", onMouseUp);
}
getPickedColor() {
let imageData = this.context.getImageData(this.pickerCircle.x, this.pickerCircle.y, 1, 1);
return { r: imageData.data[0], g: imageData.data[1], b: imageData.data[2] };
}
onChange(callback) {
this.onChangeCallback = callback;
}
}
let picker = new Picker(document.getElementById("color-picker"), 250, 220); picker.build();
picker.onChange((color) => {
let selected = document.getElementsByClassName("selected")[0];
selected.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`; });
[1]: https://i.stack.imgur.com/MQsjs.png
[2]: https://i.stack.imgur.com/krEYa.png
Thanks in advance!
the solution is simple, dont use the if(isMouseDown){..}, because that will make your code very unresponsive, so what I did is that I declared a varable let i = 0; then on the onMouseDown, whenever that function is called, it will increment the value of i and I changed the onMouseMove from if(isMouseDown){..} to if(i % 2 === 0){..} heres my solution:
class Picker {
constructor(target, width, height) {
this.target = target;
this.width = width;
this.height = height;
this.target.width = width;
this.target.height = height;
//Get context
this.context = this.target.getContext("2d");
//Circle
this.pickerCircle = { x: 10, y: 10, width: 10, height: 10 };
this.listenForEvents();
}
draw() {
}
build() {
let gradient = this.context.createLinearGradient(0, 0, this.width, 0);
//Color Stops
gradient.addColorStop(0, "rgb(255, 0, 0)");
gradient.addColorStop(0.15, "rgb(255, 0, 255)");
gradient.addColorStop(0.33, "rgb(0, 0, 255)");
gradient.addColorStop(0.49, "rgb(0, 255, 255)");
gradient.addColorStop(0.67, "rgb(0, 255, 0)");
gradient.addColorStop(0.84, "rgb(255, 255, 0)");
gradient.addColorStop(1, "rgb(255, 0, 0)");
//Fill it
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Apply black and white
gradient = this.context.createLinearGradient(0, 0, 0, this.height);
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)");
gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
this.context.fillStyle = gradient;
this.context.fillRect(0, 0, this.width, this.height);
//Circle
this.context.beginPath();
this.context.arc(this.pickerCircle.x, this.pickerCircle.y, this.pickerCircle.width, 0, Math.PI * 2);
this.context.strokeStyle = "black";
this.context.stroke();
this.context.closePath();
}
listenForEvents() {
let isMouseDown = true;
let i =0;
const onMouseDown = (e) => {
this.build();
isMouseDown = true
i++
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
const onMouseMove = (e) => {
if(i%2 == 0) {
this.build();
let currentX = e.clientX - this.target.offsetLeft;
let currentY = e.clientY - this.target.offsetTop;
this.pickerCircle.x = currentX;
this.pickerCircle.y = currentY;
}
}
const onMouseUp = () => {
isMouseDown = false;
}
//Register
this.target.addEventListener("mousedown", onMouseDown);
this.target.addEventListener("mousemove", onMouseMove);
this.target.addEventListener("mousemove", () => this.onChangeCallback(this.getPickedColor()));
document.addEventListener("mouseup", onMouseUp);
}
getPickedColor() {
let imageData = this.context.getImageData(this.pickerCircle.x, this.pickerCircle.y, 1, 1);
return { r: imageData.data[0], g: imageData.data[1], b: imageData.data[2] };
}
onChange(callback) {
this.onChangeCallback = callback;
}
}
let picker = new Picker(document.getElementById("color-picker"), 250, 220); picker.build();
picker.onChange((color) => {
let selected = document.getElementsByClassName("selected")[0];
selected.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`; });
html, body {
width: 100%;
height: 100%;
font-family: Oxygen, sans-serif;
text-align: center; }
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center; }
#color-picker {
border: .5px solid rgba(15, 15, 15, 0.2); }
.info {
width: 12em;
display: flex;
margin-left: 4em;
flex-direction: row;
justify-content: space-between; }
.selected {
width: 50px;
height: 50px;
border-radius: 100%;
border: 2px solid rgba(15, 15, 15, 0.2); }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<h2>Let's Create a Color Picker</h2>
<div class="container">
<canvas id="color-picker"></canvas>
<div class="info">
<h3>Selected Color</h3>
<div class="selected"></div>
</div>
</div>
</body>
</html>
I am trying to change the background colour of a div based on it's current colour, via the click of a button.
For example, if the colour is cyan (#00ffff - it should change to yellow ('ffff00).
If the colour is yellow - it should change to magenta (#ff00ff).
If the colour is magenta - it should revert back to cyan.
I have managed to change the color to yellow from cyan, however I am not sure exactly how to write my if statement (assuming an if statement is the best way?) to change the colours based on the current colour.
function ColorFunction() {
if (light.getItem("backgroundColor") == '#00ffff') {
document.getElementById("light").style.backgroundColor = "#ffff00";
}
else
if (light.getItem("backgroundColor") == '#ffff00') {
document.getElementById("light").style.backgroundColor = "#ff00ff";
}
else
if (light.getItem("backgroundColor") == '#ff00ff') {
document.getElementById("light").style.backgroundColor = "00ffff";
}
}
.main {
width:250px;
color: #202020;
background-color: #d0d0d0;
}
.light {
width: 50px;
height: 50px;
background-color: #00ffff
}
#burn {
width: 150px;
font-style: italic;
}
#button {
font-style: bold;
width: 150px;
}
<h1>Disco Inferno</h1>
<div class="light" id="light">
div
</div>
<button onClick="ColorFunction()">Burn!</button>
Ok, lets start at the beginning here.
You have an element with the id light but that does not automatically become a variable you can use in javascript. Its easy enough to make it one:
var light = document.getElementById("light");
Then, i'm not even sure where you get getItem from - perhaps it was a guess - but its not a valid method on an HTMLElement
You could do this with light.style.backgroundColor - see the snippet below.
var colors = ["rgb(0, 255, 255)","rgb(255, 255, 0)","rgb(255, 0, 255)"];
function ColorFunction() {
var light = document.getElementById("light");
var curr = light.style.backgroundColor;
var next = colors.indexOf(curr)+1;
light.style.backgroundColor = colors[next%colors.length];
}
<h1>Disco Inferno</h1>
<div class="light" id="light" style="background-color:#00FFFF">
Burn, baby burn!
</div>
<button onClick="ColorFunction()">Burn!</button>
You could use an object for shifting the colors, after assigning directly a color to the div.
function ColorFunction() {
var colors = {
'rgb(0, 255, 255)': 'rgb(255, 255, 0)',
'rgb(255, 255, 0)': 'rgb(255, 0, 255)',
'rgb(255, 0, 255)': 'rgb(0, 255, 255)'
},
element = document.getElementById("light");
element.style.backgroundColor = colors[element.style.backgroundColor];
}
.main { width:250px; color: #202020; background-color: #d0d0d0; }
.light { width: 50px; height: 50px; background-color: #00ffff; }
#burn { width: 150px; font-style: italic; }
#button { font-style: bold; width: 150px; }
<div class="light" id="light" style="background-color: #00ffff;"></div>
<button onClick="ColorFunction()">Burn!</button>
There is no getItem() that is some made up method. Look at the console and you will see that it is an error. To read background color you should be using style.
var color = elementReference.style.backgroundColor
Now you are relying on a bad feature of JavaScript where you define a variable that matches an id of an element and it is magically a reference to that element.You should not do that. You should define the variable yourself.
var elementReference = document.getElementById("light");
Now the kicker, browsers returning different things when you read color values. SOme hex, some rgb. So checking for color is a bad thing to do. What to do? Use CSS classes.
function ColorFunction(){
var elem = document.getElementById("light");
if(elem.classList.contains("red")) {
elem.classList.remove("red");
elem.classList.add("blue");
} else if(elem.classList.contains("blue")) {
elem.classList.remove("blue");
elem.classList.add("green");
} else {
elem.classList.remove("green");
elem.classList.add("red");
}
}
.red { background-color: red;}
.blue {background-color: blue;}
.green {background-color: green;}
<h1>Disco Inferno</h1>
<div class="light red" id="light">
div
</div>
<button onClick="ColorFunction()">Burn!</button>
Now there are other ways to do the if check with add/remove, but that is the basic idea.
I have a main div containing n * n divs which have either a black background or a white one.
I want them to change their BGcolor by clicking on the main div.
Here's my code (that doesn't work obviously).
function invert(){
var divs = document.getsElementsByTagName("div");
for(i=0; i<divs.length; i++){
if(divs[i].style.backgroundColor=="black")
{
divs[i].style.backgroundColor="white";
}
else if (divs[i].style.backgroundColor=="white")
{
divs[i].style.backgroundColor="black";
}
}
}
If you haven't explicitly set a background color it may still be "" (at least that is what I see in Firefox) so none of your if condition matches.
Instead you could also switch to black if you detect that the current color is not set:
var color = divs[i].style.backgroundColor;
if (color === "black")
divs[i].style.backgroundColor = "white";
else if (!color || color === "white")
divs[i].style.backgroundColor = "black";
Give all the DIVs a default background color of white.
Add a black class to some of them.
Use classList.toggle to alternate the colors:
document.body.onclick= function() {
var divs= document.querySelectorAll('div');
for(var i = 0 ; i < divs.length ; i++) {
divs[i].classList.toggle('black');
}
}
body, html {
height: 100%;
background: lightyellow;
}
div {
width: 50px;
height: 50px;
border: 1px solid #333;
display: inline-block;
background: white;
}
.black {
background: black;
}
<div class="black"></div>
<div></div>
<div class="black"></div>
<div></div>
<div class="black"></div>
<div class="black"></div>
<div></div>
<div></div>
Two ways to achieve this:
1- style.backgroundColor (if you let the bg color info inline):
function turnthelights() {
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {
if (x[i].style.backgroundColor === "black"){
x[i].style.backgroundColor = "white";
} else {
x[i].style.backgroundColor = "black";
}
}
}
body {
background-color: greenyellow;
}
.inner {
width: 80px;
height: 80px;
display: inline-block;
outline: 2px solid gold;
}
<div id=container onclick="turnthelights()">
<div class="inner" style="background-color: black"></div>
<div class="inner" style="background-color: white"></div>
<div class="inner" style="background-color: black"></div>
<div class="inner" style="background-color: white"></div>
<div class="inner" style="background-color: black"></div>
<div class="inner" style="background-color: white"></div>
</div>
2- getComputedStyle(element).backgroundColor (bg color info anywhere):
function turnthelights() {
var x = document.querySelectorAll(".inner");
var i;
for (i = 0; i < x.length; i++) {
var k = x[i];
var z = getComputedStyle(k).backgroundColor;
if (z == "rgb(0, 0, 0)"){
x[i].style.backgroundColor = "rgb(255, 255, 255)";
} else {
x[i].style.backgroundColor = "rgb(0, 0, 0)";
}
}
}
body {
background-color: hotpink;
}
.inner {
width: 80px;
height: 80px;
display: inline-block;
outline: 2px solid gold;
}
.black {
background-color: rgb(0, 0, 0);
}
.white {
background-color: rgb(255, 255, 255);
}
<div id=container onclick="turnthelights()">
<div class="inner black"></div>
<div class="inner white"></div>
<div class="inner black"></div>
<div class="inner white"></div>
<div class="inner black"></div>
<div class="inner white"></div>
</div>
Now 2020, and I find the real solution, get the style and set style must use a different method:
function changeColor(cell) {
var red = "rgba(255, 4, 10, 1)"; //rgba or rgb, so if you really want to use this, you need use regexp.
var grey = "rgba(230, 230, 230, 1)"; //pls change your css to this too.
var style = cell.computedStyleMap().get('background-color').toString();
if (style == grey) {
cell.style.backgroundColor = red;
} else if (style == red) {
cell.style.backgroundColor = grey;
}
}
for chrome this is ok, but, maybe other browser with other color format, you need test it.
I need to draw a canvas rect with shadow which has shadows on four sides of the rect, similar to a div has style as "box-shadow":"0px 0px 5px 5px"
You can use context.shadowColor plus context.shadowBlur to create the box-shadow effect.
Canvas's blur is very light so you must often overdraw the blurs to make them prominent.
Here's my version of your box-shadow: 0 0 5px 5px:
Example annotated code:
shadowRect(10,10,105,45,5,'red');
function shadowRect(x,y,w,h,repeats,color){
// set stroke & shadow to the same color
ctx.strokeStyle=color;
ctx.shadowColor=color;
// set initial blur of 3px
ctx.shadowBlur=3;
// repeatedly overdraw the blur to make it prominent
for(var i=0;i<repeats;i++){
// increase the size of blur
ctx.shadowBlur+=0.25;
// stroke the rect (which also draws its shadow)
ctx.strokeRect(x,y,w,h);
}
// cancel shadowing by making the shadowColor transparent
ctx.shadowColor='rgba(0,0,0,0)';
// restroke the interior of the rect for a more solid colored center
ctx.lineWidth=2;
ctx.strokeRect(x+2,y+2,w-4,h-4);
}
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
shadowRect(10,10,105,45,5,'red');
function shadowRect(x,y,w,h,repeats,color){
// set stroke & shadow to the same color
ctx.strokeStyle=color;
ctx.shadowColor=color;
// set initial blur of 3px
ctx.shadowBlur=3;
// repeatedly overdraw the blur to make it prominent
for(var i=0;i<repeats;i++){
// increase the size of blur
ctx.shadowBlur+=0.25;
// stroke the rect (which also draws its shadow)
ctx.strokeRect(x,y,w,h);
}
// cancel shadowing by making the shadowColor transparent
ctx.shadowColor='rgba(0,0,0,0)';
// restroke the interior of the rect for a more solid colored center
ctx.lineWidth=2;
ctx.strokeRect(x+2,y+2,w-4,h-4);
}
body{ background-color: ivory; padding:10px;}
<h4>box-shadow: 0 0 5px 5px red</h4>
<div style="box-shadow: 0 0 5px 5px red; height: 40px; width:100px;"></div>
<br>
<h4>Canvas "box-shadow" using context shadowing</h4>
<canvas id="canvas" width=200 height=100></canvas>
CanvasRenderingContext2D.shadowColor property in combination with shadowBlur, shadowOffsetX, or shadowOffsetY does just that.
Example:
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const shadowRect = ({
x = 15,
y = 15,
w = 100,
h = 40,
fillStyle = 'tomato',
shadowOffsetX = 0,
shadowOffsetY = 3,
shadowBlur = 15,
shadowColor = "rgba(21, 24, 50, 0.3)"
} = {}) => {
ctx.shadowOffsetX = shadowOffsetX;
ctx.shadowOffsetY = shadowOffsetY;
ctx.shadowBlur = shadowBlur;
ctx.shadowColor = shadowColor;
ctx.fillStyle = fillStyle;
ctx.fillRect(x, y, w, h);
}
shadowRect({ fillStyle: '#C99DFE' });
body {
background-color: #E5E5E5;
padding: 10px;
font-family: sans-serif;
font-size: 16px;
}
.shadowRect {
margin: 15px 0 0 15px;
background-color: #C99DFE;
box-shadow: 0px 3px 15px rgba(21, 24, 50, 0.3);
border-radius: 2px;
width:100px;
height: 40px;
}
<h4>CSS</h4>
<pre>
width: 100px;
height: 40px;
margin: 15px 0 0 15px;
background-color: #C99DFE;
box-shadow: 0px 3px 15px rgba(21, 24, 50, 0.3);
</pre>
<div class="shadowRect"></div>
<br>
<h4>Canvas</h4>
<pre>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.shadowOffsetX = 15;
ctx.shadowOffsetY = 15;
ctx.shadowBlur = 15;
ctx.shadowColor = 'rgba(21, 24, 50, 0.3)';
ctx.fillStyle = '#C99DFE';
ctx.fillRect(15, 15, 100, 40);
</pre>
<canvas id="canvas" width=200 height=100></canvas>