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();
});
});
Related
const canvas = document.getElementById('drawing-board');
const toolbar = document.getElementById('toolbar');
const ctx = canvas.getContext('2d');
const canvasOffsetX = canvas.offsetLeft;
const canvasOffsetY = canvas.offsetTop;
canvas.width = window.innerWidth - canvasOffsetX;
canvas.height = window.innerHeight - canvasOffsetY;
let isPainting = false;
let lineWidth = 5;
let startX;
let startY;
toolbar.addEventListener('click', e => {
if (e.target.id === 'clear') {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
});
toolbar.addEventListener('change', e => {
if(e.target.id === 'stroke') {
ctx.strokeStyle = e.target.value;
}
if(e.target.id === 'lineWidth') {
lineWidth = e.target.value;
}
});
const draw = (e) => {
if(!isPainting) {
return;
}
ctx.lineWidth = lineWidth;
ctx.lineCap = 'round';
ctx.lineTo(e.clientX - canvasOffsetX, e.clientY);
ctx.stroke();
}
canvas.addEventListener('mousedown', (e) => {
isPainting = true;
startX = e.clientX;
startY = e.clientY;
});
canvas.addEventListener('mouseup', e => {
isPainting = false;
ctx.stroke();
ctx.beginPath();
});
canvas.addEventListener('mousemove', draw);
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
color: white;
}
h1 {
background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container {
height: 100%;
display: flex;
}
#toolbar {
display: flex;
flex-direction: column;
padding: 5px;
width: 70px;
background-color: #202020;
}
#toolbar * {
margin-bottom: 6px;
}
#toolbar label {
font-size: 12px;
}
#toolbar input {
width: 100%;
}
#toolbar button {
background-color: #1565c0;
border: none;
border-radius: 4px;
color:white;
padding: 2px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Drawing app</title>
</head>
<body>
<section class="container">
<div id="toolbar">
<h1>Draw.</h1>
<label for="stroke">Stroke</label>
<input id="stroke" name='stroke' type="color">
<label for="lineWidth">Line Width</label>
<input id="lineWidth" name='lineWidth' type="number" value="5">
<button id="clear">Clear</button>
</div>
<div class="drawing-board">
<canvas id="drawing-board"></canvas>
</div>
</section>
<script src="./index.js"></script>
</body>
</html>
I am making a simple line drawer and this is what I have so far. One of the main features i need it to have is solid straight lines as this is for a bigger project in which this is meant to represent pipes. So the lines cannot bend or curve but must be how the code shows it to be. The issue i am having now is if i want to have the lines to stay on the canvas after another mouse down and click then the lines aren't straight and is almost a paint application. I have provided the code down below.
const canvasEle = document.getElementById('drawContainer');
const context = canvasEle.getContext('2d');
let startPosition = {x: 0, y: 0};
let lineCoordinates = {x: 0, y: 0};
let isDrawStart = false;
const getClientOffset = (event) => {
const {pageX, pageY} = event.touches ? event.touches[0] : event;
const x = pageX - canvasEle.offsetLeft;
const y = pageY - canvasEle.offsetTop;
return {
x,
y
}
}
const drawLine = () => {
if(!isDrawStart) {
return;
}
context.beginPath();
context.moveTo(startPosition.x, startPosition.y);
context.lineTo(lineCoordinates.x, lineCoordinates.y);
context.stroke();
}
const mouseDownListener = (event) => {
startPosition = getClientOffset(event);
isDrawStart = true;
}
const mouseMoveListener = (event) => {
if(!isDrawStart) return;
lineCoordinates = getClientOffset(event);
clearCanvas();
drawLine();
}
const mouseupListener = (event) => {
isDrawStart = false;
}
const clearCanvas = () => {
context.clearRect(0, 0, canvasEle.width, canvasEle.height);
}
canvasEle.addEventListener('mousedown', mouseDownListener);
canvasEle.addEventListener('mousemove', mouseMoveListener);
canvasEle.addEventListener('mouseup', mouseupListener);
canvasEle.addEventListener('touchstart', mouseDownListener);
canvasEle.addEventListener('touchmove', mouseMoveListener);
canvasEle.addEventListener('touchend', mouseupListener);
body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
color: white;
}
h1 {
background: #7F7FD5;
background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.container {
height: 100%;
display: flex;
}
#toolbar {
display: flex;
flex-direction: column;
padding: 5px;
width: 70px;
background-color: #202020;
}
#toolbar * {
margin-bottom: 6px;
}
#toolbar label {
font-size: 12px;
}
#toolbar input {
width: 100%;
}
#toolbar button {
background-color: #1565c0;
border: none;
border-radius: 4px;
color:white;
padding: 2px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
</head>
<body>
<canvas id = "drawContainer" width = "500" height = "500" style = "border: 1px solid #333;"></canvas>
<script src="index.js"></script>
</body>
</html>
Adding line segments
I am guessing this is what you are after. A set of line segments added as the use clicks and drags (mouse or touch)
The simplest solution is to create an array of lines, adding lines to the array at the end of each click drag interaction.
Example
The example adds some functions to create points and lines, draw a line and lines from an array of lines.
const ctx = canvas.getContext('2d'), lines = [];
const Point = (x = 0, y = 0) => ({x,y});
const Line = (p1, p2) => ({p1, p2});
var currentLine = Line(Point(), Point()), addingLine = false;
["mousedown", "mousemove", "mouseup", "touchstart", "touchmove", "touchend"].forEach(name => canvas.addEventListener(name, mouseEvent));
function getClientOffset(event, point) {
event = event.touches ? event.touches[0] : event;
point.x = event.pageX - canvas.offsetLeft;
point.y = event.pageY - canvas.offsetTop;
}
function drawLine(line) {
ctx.moveTo(line.p1.x, line.p1.y);
ctx.lineTo(line.p2.x, line.p2.y);
}
function UpdateDisplay() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (const l of lines) { drawLine(l) }
addingLine && drawLine(currentLine);
ctx.stroke();
}
function mouseEvent(event) {
if (event.type === "mousedown" || event.type === "touchstart") {
getClientOffset(event, currentLine.p1);
getClientOffset(event, currentLine.p2);
addingLine = true;
UpdateDisplay();
} else if (event.type === "mouseup" || event.type === "touchend") {
lines.push(currentLine);
currentLine = Line(Point(), Point());
addingLine = false;
UpdateDisplay();
} else if(addingLine) {
getClientOffset(event, currentLine.p2);
UpdateDisplay();
}
}
<canvas id = "canvas" width = "500" height = "500" style = "border: 1px solid #333;"></canvas>
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>
I am able to draw a line using mouse on html canvas at correct position. Below is the code.
HTML:
<html>
<head></head>
<body onload="InitThis();">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<div align="center">
<canvas id=c width="500" height="200" style="border:2px solid black"></canvas>
</div>
</body>
</html>
index.js:
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('c').getContext("2d");
const canvas = document.querySelector('#c');
$('#c').mousedown(function (e) {
mousePressed = true;
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
});
$('#c').mousemove(function (e) {
if (mousePressed) {
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
}
});
$('#c').mouseup(function (e) {
mousePressed = false;
});
$('#c').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 9;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
But when I included video and moved the canvas position in html, line is being drawn when I use mouse but not at correct position where I clicked the mouse. It is being drawn down well below the mouse position.
HTML:
<html>
<head></head>
<body onload="InitThis();">
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<div align="center">
<video id=v controls loop autoplay muted>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>-
</video>
<canvas id=c style="border:2px solid black"></canvas>
</div>
</body>
</html>
index.css:
#c {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400;
height: 300;
}
#v {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400;
height: 300;
}
index.js is same as the first program. Initially I thought it is happening because of video element. But even after removing video element also, same issue is happening. I was thinking because of position as 'absolute'. But I need the canvas and video elements at the same positions I mentioned in index.css. Can any one please let me know how to fix this issue.
Note: This is working fine when I test using codepen (https://codepen.io/adinakr/pen/OJymJNj). But when I try it directly on the browsers, the issue is happening.
First of all, putting top: 0px;, bottom: 0px;, right: 0px; and left: 0px; together doesn't make sense.
Second, I don't recommend using width: 400px; and height: 300px; with <canvas>, because they make it shrinking. So that's why it's being drawn in the incorrect position.
So instead, use the width and height attributes in the <canvas> element.
Here is an example:
<canvas width="800" height="600"></canvas>
Here is your code:
var mousePressed = false;
var lastX, lastY;
var ctx;
function InitThis() {
ctx = document.getElementById('c').getContext("2d");
const canvas = document.querySelector('#c');
$('#c').mousedown(function (e) {
mousePressed = true;
//Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, false);
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, false);
});
$('#c').mousemove(function (e) {
if (mousePressed) {
//Draw(e.pageX - $(this).offset().left, e.pageY - $(this).offset().top, true);
Draw(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
}
});
$('#c').mouseup(function (e) {
mousePressed = false;
});
$('#c').mouseleave(function (e) {
mousePressed = false;
});
}
function Draw(x, y, isDown) {
if (isDown) {
ctx.beginPath();
ctx.strokeStyle = "blue";
ctx.lineWidth = 9;
ctx.lineJoin = "round";
ctx.moveTo(lastX, lastY);
ctx.lineTo(x, y);
ctx.closePath();
ctx.stroke();
}
lastX = x; lastY = y;
}
function clearArea() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
#c {
position: absolute;
top: 0;
//bottom: 0;
left: 0;
//right: 0;
//width: 400;
//height: 300;
}
#v {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 400;
height: 300;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body onload="InitThis();">
<link rel="stylesheet" href="index.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<div align="center">
<video id=v controls loop autoplay muted>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type=video/mp4>
</video>
<canvas id=c></canvas>
<!--<br /><br />
<button onclick="javascript:clearArea();return false;">Clear Area</button> -->
</div>
</body>
</html>
I'm trying to re-create the bouncing ball effect but with an arrow.
When the arrow gets to the right wall it points left and come back until it reach the left wall and then point right again. Within a continuous loop.
I'm fairly new to JS and animation. Any help would be appreciated.
So far I have the arrow work fine back and forth, but doesn't reverse/flip when hitting the wall.
Thank you.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="400" style="border: solid; border-color: black;"></canvas>
<script type="text/javascript">
window.onload = function () {
var context;
var dx = 1;
var w3;
var ctx;
var img;
function setCanvas() {
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
ctx = canvas.getContext('2d');
img = new Image();
img.onload = function (e) {
draw();
}
img.src = '/rightArrow2.png';
w3 = img.width;
draw();
}
}
var startPos = 200;
var endPos = 100;
var x = 100;
var y = 10;
function draw() {
ctx.clearRect(0, 0, 500, 500);
ctx.drawImage(img, x, y);
x += dx;
if (x < endPos || x > startPos) {
ctx.clearRect(0, 0, 500, 500);
var canvas = document.getElementById('canvas');
ctx2 = canvas.getContext('2d');
var img2 = new Image();
img2.src = document.getElementById("canvas").toDataURL();
var w4 = img2.width;
ctx2.save();
ctx2.translate(-w4, 0);
ctx2.scale(-1, 1);
ctx2.drawImage(img2, x , y);
ctx2.restore();
dx = -dx;
}
setTimeout(draw, 15);
}
setCanvas();
}
</script>
</body>
</html>
var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function draw(){
context= myCanvas.getContext('2d');
context.clearRect(0,0,300,300);
context.beginPath();
context.fillStyle="#0000ff";
context.arc(x,y,20,0,Math.PI*2,true);
context.closePath();
context.fill();
if( x<0 || x>300)
dx=-dx;
if( y<0 || y>300)
dy=-dy;
x+=dx;
y+=dy;
}
setInterval(draw,10);
<!--
body { background-color:#ededed; font:normal 12px/18px Arial, Helvetica, sans-serif; }
#container { width:600px; margin:0 auto; }
#myCanvas { background:#fff; border:1px solid #cbcbcb; }
#nav { display:block; width:100%; text-align:center; }
#nav li { display:block; font-weight:bold; line-height:21px; text-shadow:1px 1px 1px #fff; width:100px; height:21px; padding:5px; margin:0 10px; background:#e0e0e0; border:1px solid #ccc; -moz-border-radius:4px;-webkit-border-radius:4px; border-radius:4px; float:left; }
#nav li a { color:#000; display:block; text-decoration:none; width:100%; height:100%; }
-->
<div id="container">
<canvas id="myCanvas" width="300" height="300"></canvas>
<ul id="nav">
<li>View Tutorial</li>
<li>Post Comment</li>
</ul>
</div>
Try replacing your draw() function with this:
function draw() {
ctx.clearRect(0, 0, 500, 500);
if (dx > 0) {
ctx.drawImage(img, x, y);
}
else {
ctx.save();
ctx.translate(x + img.width, y);
ctx.scale(-1, 1);
ctx.drawImage(img, 0, 0);
ctx.restore();
}
x += dx;
if (x < endPos || x > startPos) {
dx = -dx;
}
setTimeout(draw, 15);
}
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;