Hi this might seem a basic question, but let me just ask it anyway:
I am trying to develop a scribbling tool with html, css & javascript. I have a canvas which I upload an image to, and draw lines on. When I place the canvas element within a div, I cannot use the whole space to draw (Screenshot 1), but when I place the canvas element separately and as the top most element on the page I can utilise the whole drawing space. I am not sure what is going on but please CSS and Js stalwarts out there if you could tell me what I am doing wrong (or how to solve this issue)?
Also the html code is written below
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Another day... Another app</title>
<link rel="stylesheet" href="assets/css/style.css">
<script src="assets/js/script.js"></script>
</head>
<body>
<div id="main" class="main">
<input type="text" placeholder="search notes.. ">
<a href="javascript:void(null);" onclick="openOverlay();">Create note</a>
</div>
<div id="overlay" class="overlay">
<a href="javascript:void(null);" onclick="closeOverlay();">Close ×</a>
<div id="overlay-content" class="overlay-content">
<div class="top" id="top">
<label for="note">Notes</label>
<textarea id="note"></textarea>
</div>
<!-- <div class="middle" id="middle">-->
<!-- </div>-->
<div class="bottom" id="bottom">
<label for="note">Notes</label>
<textarea id="note"></textarea>
</div>
</div>
</div>
<canvas id="canvas" width="400" height="560"></canvas>
</body>
</html>
The css is written below:
*{
box-sizing: border-box;
}
body{
background: rgba(0, 0, 0, 0.1);
font-family: sans-serif;
font-size: 1px;
}
body a{
font-size: 10em;
display: block;
padding-top: 4em;
}
body input[type=text]{
font-size: 20em;
display: block;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(252,186,1);
background-color: rgba(252,186,1, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content{
margin: 20em;
padding: 10em;
display: block;
}
#top, #bottom{
padding: 40em;
}
/*
.overlay-content label{
font-size: 20em;
display: block;
}
.overlay-content label{
font-size: 20em;
display: block;
}
.overlay-content canvas-ctr{
display: block;
}
*/
@media screen and (min-width: 768px) {
}
EDIT: here's the JS I use:
function openOverlay() {
document.getElementById("overlay").style.width = "100%";
// initNote();
}
function closeOverlay() {
document.getElementById("overlay").style.width = "0%";
}
//function initNote(){
//
window.addEventListener("load", () => {
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = "assets/images/Img.JPG";
img.onload = () => {
const [img_scaled_width, img_scaled_height] = drawImageToScale(img, ctx);
canvas.width = img_scaled_width;
canvas.height = img_scaled_height;
window.addEventListener('resize', drawImageToScale(img,ctx));
}
// variables
let painting = false;
function startPosition(e){
painting = true;
draw(e);
}
function finishedPosition(){
painting = false;
ctx.beginPath();
}
function draw(e){
if (!painting)
return;
ctx.lineWidth = 3;
ctx.lineCap = 'round';
//console.log(e.clientX, e.clientY);
ctx.lineTo(e.clientX, e.clientY);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(e.clientX, e.clientY);
}
// eventListeners
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw)
});
const MAX_WIDTH=400;
const MAX_HEIGHT=560;
function drawImageToScale(img, ctx){
var img_width = MAX_WIDTH;
var img_height = MAX_HEIGHT;
const scaleFactor = img_width / img.width;
if(img.height < MAX_HEIGHT){
const img_height = img.height * scaleFactor;
}
ctx.drawImage(img, 0, 0,img_width,img_height);
return [img_width,img_height];
}
//}
