Skip to content

Commit

Permalink
Add box shadow to canvas element
Browse files Browse the repository at this point in the history
  • Loading branch information
nmarsceau committed May 16, 2024
1 parent 8a7305d commit 4a1921d
Show file tree
Hide file tree
Showing 6 changed files with 10 additions and 2 deletions.
2 changes: 2 additions & 0 deletions _site/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
--brown: #674400;
--transparentYellow: rgba(255, 212, 0, 0.15);
--transparentOrange: rgba(255, 148, 0, 0.7);
--transparentBlack: rgba(0, 0, 0, 0.5);
}

body {
Expand All @@ -17,6 +18,7 @@ body {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 5px 5px 15px var(--transparentBlack);
}

.toolbar {
Expand Down
2 changes: 2 additions & 0 deletions _site/assets/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export class App {

clearCanvas() {
this.canvasContext.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height)
this.canvasElement.width = 0
this.canvasElement.height = 0
}

triggerFilePicker() {
Expand Down
2 changes: 1 addition & 1 deletion _site/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Frame-It</title><link href="./assets/css/style.css" rel="stylesheet"></head><body draggable="true"><div class="toolbar"><button type="button" id="upload" class="icon button"><span class="visuallyHidden">Select a file</span></button> <button type="button" id="copy" class="icon button"><span class="visuallyHidden">Copy</span></button> <button type="button" id="download" class="icon button"><span class="visuallyHidden">Download</span></button> <button type="button" id="clear" class="icon button"><span class="visuallyHidden">Clear</span></button></div><canvas id="canvas"></canvas><input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1"><script type="module">import { App } from "./assets/js/app.js"
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Frame-It</title><link href="./assets/css/style.css" rel="stylesheet"></head><body draggable="true"><div class="toolbar"><button type="button" id="upload" class="icon button"><span class="visuallyHidden">Select a file</span></button> <button type="button" id="copy" class="icon button"><span class="visuallyHidden">Copy</span></button> <button type="button" id="download" class="icon button"><span class="visuallyHidden">Download</span></button> <button type="button" id="clear" class="icon button"><span class="visuallyHidden">Clear</span></button></div><canvas id="canvas" width="0" height="0"></canvas><input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1"><script type="module">import { App } from "./assets/js/app.js"
const app = new App(
document.querySelector('#canvas'),
document.querySelector('#file')
Expand Down
2 changes: 2 additions & 0 deletions src/_includes/assets/css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
--brown: #674400;
--transparentYellow: rgba(255, 212, 0, 0.15);
--transparentOrange: rgba(255, 148, 0, 0.7);
--transparentBlack: rgba(0, 0, 0, 0.5);
}

body {
Expand All @@ -17,6 +18,7 @@ body {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
box-shadow: 5px 5px 15px var(--transparentBlack);
}

.toolbar {
Expand Down
2 changes: 2 additions & 0 deletions src/_includes/assets/js/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,8 @@ export class App {

clearCanvas() {
this.canvasContext.clearRect(0, 0, this.canvasElement.width, this.canvasElement.height)
this.canvasElement.width = 0
this.canvasElement.height = 0
}

triggerFilePicker() {
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
<span class="visuallyHidden">Clear</span>
</button>
</div>
<canvas id="canvas"></canvas>
<canvas id="canvas" width="0" height="0"></canvas>
<input type="file" id="file" accept="image/*, image/avif" class="visuallyHidden" tabindex="-1">
<script type="module">
import { App } from "./assets/js/app.js"
Expand Down

0 comments on commit 4a1921d

Please sign in to comment.