Develop Reference

How to check if two round divs are overlapping

This is my codepen. I want to check if the divs are overlapping each other with jQuery. I wrote a code for that but it doesn't work with round boxes. it only works with squares and rectangles. how can I make it work with round divs?
const coordinates = (className) => {
const val = document.querySelector(className);
return {
y: val.offsetTop,
x: val.offsetLeft,
yh: val.offsetTop + val.offsetHeight,
xw: val.offsetLeft + val.offsetWidth,
}
}
const cm = coordinates(".circle.small");
const cl = coordinates(".circle.large");
const offset_x = cm.x < cl.x && cm.xw > cl.x;
const offset_xw = cm.x < cl.xw && cm.xw > cl.xw;
const offset_cx = cm.x < cl.xw && cm.xw < cl.xw;
const offset_cy = cm.y < cl.yh && cm.yh < cl.yh;
const offset_y = cm.y < cl.y && cm.yh > cl.y;
const offset_yh = cm.y < cl.yh && cm.yh > cl.yh;
const is_x = offset_x || offset_xw || offset_cx;
const is_y = offset_y || offset_yh || offset_cy;
console.log(is_x, is_y);
.circle {
width: var(--square);
height: var(--square);
background: var(--bg);
border-radius: 50%;
}
.parent {
margin-left: 5px;
}
.parent2 {
margin-left: 15px;
}
.small {
--square: 50px;
--bg: red;
margin-bottom: -5px;
}
.large {
--square: 100px;
--bg: green;
}
<div class="parent">
<div class="circle small"></div>
</div>
<div class="parent2">
<div class="circle large"></div>
</div>

Your logic to calculate the delta between circle positions isn't quite right. You need to get the X and Y from the centre of each circle, then work out if the hypotenuse calculated from those two points is less than half of the combined radii.
Here's a working example. Note that I only added jQuery/jQueryUI to make dragging the circles around easier for testing - neither of these libraries are required for production use.
let $label = $('.overlap-label span');
const hasOverlap = (x0, y0, r0, x1, y1, r1) => Math.hypot(x0 - x1, y0 - y1) <= r0 + r1;
const coordinates = (className) => {
const el = document.querySelector(className);
const rect = el.getBoundingClientRect();
const radius = el.offsetHeight / 2;
return {
y: rect.top + radius,
x: rect.left + radius,
r: radius
}
}
const checkForOverlap = () => {
const cm = coordinates(".circle.small");
const cl = coordinates(".circle.large");
$label.text(hasOverlap(cm.x, cm.y, cm.r, cl.x, cl.y, cl.r));
}
$('.parent').draggable().on('drag', checkForOverlap);
.circle {
width: var(--square);
height: var(--square);
background: var(--bg);
border-radius: 50%;
display: inline-block;
}
.parent {
display: inline-block;
}
.small {
--square: 50px;
--bg: red;
}
.large {
--square: 100px;
--bg: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
<div class="overlap-label">Circles are overlapping? <span>false</span></div>
<div class="parent">
<div class="circle small"></div>
</div>
<div class="parent">
<div class="circle large"></div>
</div>

Issue with IF statement attaching to canvas object - JS

l do believe to have an issue regarding an if statement that allows for the detection of where the canvas object, being the image that displays , should be located at within the canvas. There is a reproducible demo provided.
NOTE: I do want to KEEP the css alignment, canvasauto, and not remove it if possible.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
x,
y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>

You're using x from the MouseEvent. This is an experimental feature which is an alias of clientX.
The clientX property gives the coordinates relative to the application's viewport.
You probably want offsetX, which is relative to (the padding edge of the) target node.
var canvas = document.getElementById("c");
var ctx = canvas.getContext("2d");
var the_button = document.getElementById("the_button");
var the_background = document.getElementById("the_background");
var imageXpos = 500;
var imageYpos = 300;
var imageWidth = 110;
var imageHeight = 80;
var imagecheck_Xpos = canvas.width - imageXpos;
var imagecheck_Ypos = canvas.height - imageYpos;
window.onload = function() {
ctx.drawImage(the_background, 0, 0, canvas.width, canvas.height);
ctx.drawImage(the_button, imagecheck_Xpos, imagecheck_Ypos, imageWidth, imageHeight);
}
the_button_function = (event) => {
const {
offsetX: x,
offsetY: y
} = event;
/* l believe the issue is here */
if ((x >= imagecheck_Xpos && x < (imagecheck_Xpos + imageWidth)) &&
(y >= imagecheck_Ypos && y < (imagecheck_Ypos + imageHeight))) {
alert("<Button>")
}
}
canvas.addEventListener('click', (e) => the_button_function(e));
html,
body {
width: 100%;
height: 100%;
margin: 0px;
border: 0;
overflow: hidden;
display: block;
}
.canvasauto {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<html>
<canvas id="c" width="970" height="550" class="canvasauto"></canvas>
<img style="display: none;" id="the_button" src="https://i.imgur.com/wO7Wc2w.png" />
<img style="display: none;" id="the_background" src="https://img.freepik.com/free-photo/hand-painted-watercolor-background-with-sky-clouds-shape_24972-1095.jpg?size=626&ext=jpg" />
</html>

How to move canvas objects each time I click the button?

I'm trying to make a game and I have the blocks spawning randomly in the grid in the one fixed row (for example row 5 [horizontally]). Every time I click the button I want the blocks to move from row 5 to row 4(vertically). And then I want the new random blocks to generate on row 5 and so on. How can I do this? Right now it only spawning the new blocks under the first row (on the row 6, then 7 and so on).
//Accessing canvas
var canvas = document.getElementById('grid');
var ctx = canvas.getContext('2d');
var w = ctx.canvas.width;
var h = ctx.canvas.height;
// Drawing grid
var drawingGrid = function() {
for (x = 0; x <= w; x += 60) {
for (y = 0; y <= h; y += 60) {
// Gray grid
ctx.globalCompositeOperation = 'destination-over';
ctx.strokeStyle = "#cccccc";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.moveTo(0, y);
ctx.lineTo(w, y);
if (x % 240 === 0) {
// Black X-axis grid |
ctx.globalCompositeOperation = "source-over";
if (x === 0 || x === 480) {
ctx.lineWidth = 5;
} else {
ctx.lineWidth = 1;
}
// Middle vertical line
if (x === 240) {
// 0-480
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 480);
ctx.strokeStyle = "#222831";
ctx.stroke();
// 480-560
ctx.beginPath();
ctx.moveTo(x, 480);
ctx.lineTo(x, 540);
ctx.strokeStyle = "#cccccc";
ctx.globalCompositeOperation = 'destination-over';
} else {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.strokeStyle = "#222831";
}
} else if (y % 240 === 0 || y === 540) {
// Black Y-axis grid _
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = "#222831";
if (y === 0 || y === 540) {
ctx.lineWidth = 5;
} else if (y === 480) {
ctx.lineWidth = 2.5;
} else {
ctx.lineWidth = 1;
}
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(h, y);
}
ctx.stroke();
}
}
};
drawingGrid(480, 540, 'grid');
// Starting coordinates
var posX = 0;
var posY = 240;
// Move blocks on Y axis
function moveY(){
posY +=60;
}
// Spawn random amount of blocks on the field
function gener(){
posX = 60*Math.floor(8*Math.random());
}
function spawnRandomObject() {
// Game Object
ctx.fillStyle = '#f2a365';
ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillRect(posX, posY, 60, 60);
ctx.stroke();
}
// Blocks moving up
document.getElementById("button").addEventListener("click", function(){
// Spawn random amount of objects
for (var i=0; i<Math.floor((Math.random()*8)+1)*2; i++){
gener();
spawnRandomObject();
}
moveY();
});
body{
background-color: #ececec;
}
canvas{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
.row{
padding: 20px;
margin: 0;
}
.firstrow{
width:20%;
}
.mainrow{
width:60%;
display: block;
}
.thirdrow{
width: 20%;
}
.header{
background-color: #222831;
color: #ececec;
padding: 20px;
}
.container{
margin-top: 20px;
padding: 0px;
display: flex;
box-sizing: inherit;
}
.thirdrow{
text-align: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shmetris</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<div class="header">
<h1>Shmetris</h1>
</div>
<div class="container">
<!-- Controls -->
<div class="row first">
<div class="col">
<h1>Score: 0</h1>
<br>
<button type="button" class="btn btn-dark" id="button">Refresh</button>
</div>
</div>
<!-- Game Area -->
<div class="row mainrow">
<div class="col-" id="gamearea">
<!-- Canvas -->
<canvas id="grid" width="480" height="540" style="background: #ececec "></canvas>
</div>
</div>
<!-- -->
<div class="row thirdrow">
<div class="col" style="text-align:left;">
</div>
</div>
</div>
<!-- Script -->
<script src="app.js"></script>
</body>
</html>

I removed your moveY() function and added the moveRow() function. The game objects (the rects) are saved to a list objects. Their y position is increased on each button click. The old drawn positions are removed, the new positions are drawn. Then the randomly generated blocks are added in the 5th row.
Note that the clearRect() function inside the removeCell() also removes parts of the grid. This causes to redraw the grid every time. You can improve the code by splitting your grid creation in using a sub function which draws the grid on only one cell. Then you can redraw the grid only on those cells that are needed. This probably is a performance boost and makes the code more beautiful in my eyes, but it works like this too.
I also suggest to use length instead of 60 and calculate the thicker grid lines by the length, e.g. 8 * length instead of 480 and so on.
//Accessing canvas
var canvas = document.getElementById('grid');
var ctx = canvas.getContext('2d');
var w = ctx.canvas.width;
var h = ctx.canvas.height;
// Drawing grid
var drawingGrid = function() {
for (x = 0; x <= w; x += 60) {
for (y = 0; y <= h; y += 60) {
// Gray grid
ctx.globalCompositeOperation = 'destination-over';
ctx.strokeStyle = "#cccccc";
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.moveTo(0, y);
ctx.lineTo(w, y);
if (x % 240 === 0) {
// Black X-axis grid |
ctx.globalCompositeOperation = "source-over";
if (x === 0 || x === 480) {
ctx.lineWidth = 5;
} else {
ctx.lineWidth = 1;
}
// Middle vertical line
if (x === 240) {
// 0-480
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, 480);
ctx.strokeStyle = "#222831";
ctx.stroke();
// 480-560
ctx.beginPath();
ctx.moveTo(x, 480);
ctx.lineTo(x, 540);
ctx.strokeStyle = "#cccccc";
ctx.globalCompositeOperation = 'destination-over';
} else {
ctx.beginPath();
ctx.moveTo(x, 0);
ctx.lineTo(x, h);
ctx.strokeStyle = "#222831";
}
} else if (y % 240 === 0 || y === 540) {
// Black Y-axis grid _
ctx.globalCompositeOperation = "source-over";
ctx.strokeStyle = "#222831";
if (y === 0 || y === 540) {
ctx.lineWidth = 5;
} else if (y === 480) {
ctx.lineWidth = 2.5;
} else {
ctx.lineWidth = 1;
}
ctx.beginPath();
ctx.moveTo(0, y);
ctx.lineTo(h, y);
}
ctx.stroke();
}
}
};
drawingGrid(480, 540, 'grid');
var length = 60;
// Starting coordinates
var posX = 0;
var posY = 4 * length;
var objects = []
function moveRows(){
for(var i = 0; i < objects.length; i++){
// remove old objects
removeCell(objects[i][0], objects[i][1]);
// move objects
objects[i][1] += length;
}
drawingGrid();
for(var i = 0; i < objects.length; i++){
// redraw objects on new location
drawCell(objects[i][0], objects[i][1]);
}
}
// Spawn random amount of blocks on the field
function gener(){
posX = length*Math.floor(8*Math.random());
}
function spawnRandomObject() {
// Game Object
drawCell(posX, posY);
objects.push([posX, posY]);
}
function drawCell(x, y, color){
ctx.fillStyle = "#f2a365";
ctx.globalCompositeOperation = "destination-over";
ctx.beginPath();
ctx.fillRect(x, y, length, length);
ctx.stroke();
}
function removeCell(x, y){
ctx.clearRect(x, y, length, length);
}
// Blocks moving up
document.getElementById("button").addEventListener("click", function(){
// Spawn random amount of objects
moveRows();
for (var i=0; i<Math.floor((Math.random()*8)+1)*2; i++){
gener();
spawnRandomObject();
}
});
body{
background-color: #ececec;
}
canvas{
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
.row{
padding: 20px;
margin: 0;
}
.firstrow{
width:20%;
}
.mainrow{
width:60%;
display: block;
}
.thirdrow{
width: 20%;
}
.header{
background-color: #222831;
color: #ececec;
padding: 20px;
}
.container{
margin-top: 20px;
padding: 0px;
display: flex;
box-sizing: inherit;
}
.thirdrow{
text-align: right;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Shmetris</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Local CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Header -->
<div class="header">
<h1>Shmetris</h1>
</div>
<div class="container">
<!-- Controls -->
<div class="row first">
<div class="col">
<h1>Score: 0</h1>
<br>
<button type="button" class="btn btn-dark" id="button">Refresh</button>
</div>
</div>
<!-- Game Area -->
<div class="row mainrow">
<div class="col-" id="gamearea">
<!-- Canvas -->
<canvas id="grid" width="480" height="540" style="background: #ececec "></canvas>
</div>
</div>
<!-- -->
<div class="row thirdrow">
<div class="col" style="text-align:left;">
</div>
</div>
</div>
<!-- Script -->
<script src="app.js"></script>
</body>
</html>

Chrome Extension Script not Working

I am extremely new to creating extensions for chrome, and right now I'm just trying to mess around and create a simple canvas that you can open up and draw on.
When I load popup.html as a normal webpage everything seems to work just fine, but when I open the extension in chrome there is no functionality.
Manifest:
{
"manifest_version": 2,
"name": "Sketchpad",
"description": " ",
"version": "0.1",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
}
}
HTML:
<!doctype html>
<html>
<head>
<title>Drawing Pad</title>
<style>
body {
font-family: "Segoe UI", "Lucida Grande", Tahoma, sans-serif;
font-size: 100%;
}
.color {display: inline-block;}
#can {
cursor: url(pencil.png), auto;
}
</style>
<script src="canvas.js"></script>
</head>
<body onload="init()">
<canvas id="can" width="400" height="400" style="border:2px solid;"></canvas><br>
<div style="display: inline-block;">Choose Color
<div class="color" style="width: 10px; height: 10px; background: green;" id="green" onclick="color(this)"></div>
<div class="color" style="width: 10px; height: 10px; background: blue;" id="blue" onclick="color(this)"></div>
<div class="color" style="width: 10px; height: 10px; background: red;" id="red" onclick="color(this)"></div>
<div class="color" style="width: 10px; height: 10px; background: yellow;" id="yellow" onclick="color(this)"></div>
<div class="color" style="width: 10px; height: 10px; background: orange;" id="orange" onclick="color(this)"></div>
<div class="color" style="width: 10px; height: 10px; background: black;" id="black" onclick="color(this)"></div>
</div>
<div style="display: inline-block;">Eraser
<div style="width:15px;height:15px;background:white;border:2px solid;display: inline-block" id="white" onclick="color(this)"></div>
</div><br>
<input type="button" value="Clear" id="clr" size="23" onclick="erase()">
</body>
</html>
JS:
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "black",
y = 2;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function color(obj) {
switch (obj.id) {
case "green":
x = "green";
break;
case "blue":
x = "blue";
break;
case "red":
x = "red";
break;
case "yellow":
x = "yellow";
break;
case "orange":
x = "orange";
break;
case "black":
x = "black";
break;
case "white":
x = "white";
break;
}
if (x == "white") y = 14;
else y = 2;
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
ctx.clearRect(0, 0, w, h);
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
After doing some research I have a feeling that something is wrong with the way I have my js code formatted, but I cannot pinpoint what that is. Sorry for the long post and thanks, any help is appreciated.

You can't put javascript code in html file in goolge-chrome-extension.
replace
html
<body onload="init()">
with:
js
document.body.addEventListener('load', function () {...})
For more information, see contentSecurityPolicy.

Also since inline JS is not allowed, onclick like <input type="button" value="Clear" id="clr" size="23" onclick="erase()"> should be
<input type="button" value="Clear" id="clr" size="23"> and use addEventListener to bind the event in your js file.
document.addEventListener('DOMContentLoaded', function() {
var clear = document.getElementById('clr');
clear.addEventListener('click', function() {
erase();
});
});

Canvas rendered under div instead of over the div

On my website, I want do render a <canvas> on top of a <div> with some other <div>'s in it. This is all working okay, however, drawing in the canvas is not possible, because it's positioned under the main <div>. You can test it in the codepen below. You can only draw on a small strip near the bottom.
Codepen: http://codepen.io/anon/pen/hfmBG
Code:
<html>
<head>
<script type="text/javascript">
var canvas, ctx, flag = false,
prevX = 0,
currX = 0,
prevY = 0,
currY = 0,
dot_flag = false;
var x = "#000",
y = 1;
function init() {
canvas = document.getElementById('can');
ctx = canvas.getContext("2d");
w = canvas.width;
h = canvas.height;
canvas.addEventListener("mousemove", function (e) {
findxy('move', e)
}, false);
canvas.addEventListener("mousedown", function (e) {
findxy('down', e)
}, false);
canvas.addEventListener("mouseup", function (e) {
findxy('up', e)
}, false);
canvas.addEventListener("mouseout", function (e) {
findxy('out', e)
}, false);
}
function draw() {
ctx.beginPath();
ctx.moveTo(prevX, prevY);
ctx.lineTo(currX, currY);
ctx.strokeStyle = x;
ctx.lineWidth = y;
ctx.stroke();
ctx.closePath();
}
function erase() {
var m = confirm("Want to clear");
if (m) {
ctx.clearRect(0, 0, w, h);
document.getElementById("canvasimg").style.display = "none";
}
}
function findxy(res, e) {
if (res == 'down') {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
flag = true;
dot_flag = true;
if (dot_flag) {
ctx.beginPath();
ctx.fillStyle = x;
ctx.fillRect(currX, currY, 2, 2);
ctx.closePath();
dot_flag = false;
}
}
if (res == 'up' || res == "out") {
flag = false;
}
if (res == 'move') {
if (flag) {
prevX = currX;
prevY = currY;
currX = e.clientX - canvas.offsetLeft;
currY = e.clientY - canvas.offsetTop;
draw();
}
}
}
function print(){
var c = document.getElementById("can");
var ctx = c.getContext("2d");
var imgData = ctx.getImageData(10,10,50,50);
console.log(imgData);
}
</script>
<style>
.patternlockbutton{
border-color: red;
background-color: transparent;
background-repeat:no-repeat;
display:block;
width:33px;
height:33px;
float:left;
margin:26px;
z-index:1;
-ms-touch-action: none;
border-style: solid;
border-width: 5px;
-webkit-border-top-left-radius: 50px;
-webkit-border-top-right-radius: 50px;
-moz-border-radius-topleft: 50px;
-moz-border-radius-topright: 50px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
-moz-border-radius-bottomleft: 50px;
-moz-border-radius-bottomright: 50px;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#can {
z-index: 99;
display: block;
}
</style>
</head>
<body onload="init()">
<div style="width:300px;height:400px;">
<div class="patternlockbutton" id="patternlockbutton1"></div>
<div class="patternlockbutton" id="patternlockbutton2"></div>
<div class="patternlockbutton" id="patternlockbutton3"></div>
<div class="patternlockbutton" id="patternlockbutton4"></div>
<div class="patternlockbutton" id="patternlockbutton5"></div>
<div class="patternlockbutton" id="patternlockbutton6"></div>
<div class="patternlockbutton" id="patternlockbutton7"></div>
<div class="patternlockbutton" id="patternlockbutton8"></div>
<div class="patternlockbutton" id="patternlockbutton9"></div>
<canvas id="can" width="300px" height="400px"></canvas>
</div>
<input type="button" value="clear" id="clr" size="23" onclick="erase()" style="position:absolute;top:55%;left:15%;">
<button onclick="print()">Console.log</button>
</body>
</html>

If you want to position an HTML element on top of other elements, you should set its position: absolute in CSS.
In your case, the parent div of the canvas should have this style applied:
position: relative;
The canvas should have this style applied:
position: absolute;
top: 0;
left: 0;