I've recently stared coding a js/html canvas file and I've noticed a big problem that I cannot solve. The problem is that the LiverSever extension suddenly stopped working. What I mean by this is out of random it just stopped working. When I try to open it, it opens in the browser but keeps on loading. I have tried many fixes but none of them seem to work. The html port "link" is," http://127.0.0.1:49423/index.html" So I was wondering if I could get some help?
html code below:
<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">
<title>Canvas</title>
<style>
canvas {
border: 1px solid lightyellow;
background: lightyellow;
}
body {
margin: 0;
}
.tooltip {
width: 100px;
position: absolute;
top: auto;
bottom: 800px;
right: 887px;
left: auto;
font-size: xx-large;
}
</style>
</head>
<body>
<canvas></canvas>
<script src="Main_Game.js">
</script>
<div class="tooltip">Money:
<script type="text/javascript">document.write(Moneys)</script>
</div>
</body>
</html>
js code:
var canvas = document.querySelector('canvas');
canvas.width = 1920;
canvas.height = 1080;
var middlex = canvas.width/2;
console.log(middlex + " - x");
var middley = canvas.height/2;
console.log(middley + " - y");
console.log(canvas);
var c = canvas.getContext('2d');
c.fillStyle = 'rgba(255,0,0)';
c.fillRect(25,540,940,250);
c.fillRect(25, 815, 940,250);
c.fillRect(985,540,915,250);
c.fillRect(985,815,915,250);
c.beginPath();
c.arc(200, 200, 30, 0, Math.PI*2, false);
c.strokeStyle = 'blue';
c.stroke();
var Moneys = 0;
while (true) {
Moneys += 1;
}
I do not know how to delete. I figured out that the name for the html was not the same as the js file
Related
I am trying to create a painting app using HTML canvas. I want to implement zoom and panning functionality to the canvas.
The user should be able to paint on the canvas, then zoom in or out(which scales the already drawn elements) and pan(which translates the elements) and then draw over them.
Currently, I am stuck at implementing zoom properly.
Solutions explored:
ctx.scale will scale the canvas but not the already painted elements. New elements are drawn with a scaled effect and away from the cursor.
Storing the canvas in another temporary canvas. Then redrawing the original canvas with scaled temporary canvas. This results in pixelation when zoomed in and so is not desired.
tempCtx.drawImage(canvas, 0, 0);
ctx.drawImage(tempCanvas, 0, 0, cw, ch, 0, 0, cw *scaleFactor, ch * scaleFactor);
CODE:
window.addEventListener('load', () => {
const canvas = document.querySelector("#canvas");
const ctx = canvas.getContext("2d");
let penColor = "#2525c5";
let brushSize = 4;
const zoomInBtn = document.querySelector("#zoom-in");
const zoomOutBtn = document.querySelector("#zoom-out");
let scaleFactor = 1;
zoomInBtn.addEventListener("click", () => {
scaleFactor = scaleFactor * 1.1;
ctx.scale(scaleFactor, scaleFactor);
});
zoomOutBtn.addEventListener("click", () => {
scaleFactor = scaleFactor * 0.9;
ctx.scale(scaleFactor, scaleFactor);
});
let painting = false;
function startPosition(e) {
painting = true;
draw(e);
}
function finishedPosition() {
painting = false;
ctx.beginPath();
}
function draw(e) {
if (!painting) return;
ctx.lineWidth = brushSize;
ctx.strokeStyle = penColor;
ctx.lineCap = "round";
let rect = e.target.getBoundingClientRect();
let x = e.clientX - rect.left;
let y = e.clientY - rect.top;
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
canvas.addEventListener("mousedown", startPosition);
canvas.addEventListener("mouseup", finishedPosition);
canvas.addEventListener("mousemove", draw);
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#toolbar {
display: flex;
}
.tool-group {
display: flex;
margin-right: 40px;
}
#canvas-container {
box-sizing: border-box;
margin-top: 50px;
margin-left: 50px;
width: 500px;
height: 500px;
border: 2px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Drawing App</title>
</head>
<body>
<div id="app">
<div id="toolbar">
<div class="tool-group">
<button id="zoom-in">Zoom in</button>
<button id="zoom-out">Zoom out</button>
</div>
</div>
<div id="canvas-container">
<canvas id="canvas" width="500" height="500"></canvas>
</div>
</div>
<script src="canvas2.js"></script>
</body>
</html>
I am trying to use this code to resize images and print them on an html canvas to modify them later:
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);
However, this does not change the result on canvas. It still appears to be too large for the canvas.
When I use this code, as suggested in this question the image does not load at all. I don't know if I am using it wrong or something but it just doesn't work.
ctx.drawImage(img, 0, 0, 300, 300 * wth);
This is my code:
function preview_image(event)
{
var output = document.getElementById('output_image');
var reader = new FileReader();
var ctx = output.getContext('2d');
//output.src = "/loading.gif";
reader.onload = function()
{
//output.src = reader.result;
var img = new Image(); // Create new img element
img.src = reader.result; // Set source path
img.onload = function() {
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, 0, 0);
}
}
reader.readAsDataURL(event.target.files[0]);
}
body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#0B3861;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
margin: auto;
}
#output_image
{
margin: auto;
max-width:300px;
}
.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReturNull Photo Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
<div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>
</div>
</body>
</html>
I changed arguments in ctx.drawImage function:
function preview_image(event)
{
var output = document.getElementById('output_image');
var reader = new FileReader();
var ctx = output.getContext('2d');
//output.src = "/loading.gif";
reader.onload = function()
{
//output.src = reader.result;
var img = new Image(); // Create new img element
img.src = reader.result; // Set source path
img.onload = function() {
var wth = img.clientHeight / img.clientWidth;
img.width=300;
img.height=300 * wth;
ctx.drawImage(img, (output.width / 2) - (img.width / 2), 0, img.width, output.height);
}
}
reader.readAsDataURL(event.target.files[0]);
}
body
{
width:100%;
margin:0 auto;
padding:0px;
font-family:helvetica;
background-color:#0B3861;
}
#wrapper
{
text-align:center;
margin:0 auto;
padding:0px;
width:995px;
margin: auto;
}
#output_image
{
margin: auto;
max-width:300px;
}
.editarea{
width: 50%;
background: #EC6C67;
margin: auto;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ReturNull Photo Editor</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<input type="file" accept="image/*" onchange="preview_image(event)"><br><br>
<div class="editarea"> <!--<img id="output_image" width="250">--> <canvas id="output_image" width="250"></canvas></div>
</div>
</body>
</html>
Is it possible to add through jquery or javascript an input field in a custom position above the <canvas> element?
I have tried the following:
changing the z-index of the canvas- and input-field
putting the canvas in an div with relative property and the input-field inside a div with absolute position, but then there are those ugly scrollbar, which I do not really want there.
My index.html page looks like this:
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<title>WebApp</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="viewport" content="width=device-width,minimum-scale=1, maximum-scale=1" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<script type="text/javascript" src="/ext/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="/ext/jquery.i18n.js"></script>
<script type="text/javascript" src="/ext/jquery.ajaxmanager.js"></script>
<script type="text/javascript" src="/ext/jquery.model.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.16/webfont.js"></script>
</head>
<body>
<noscript>
<div style="text-align: center; width: 100%; visibility: visible;">
JavaScript ist in Ihrem Browser deaktiviert. Bitte aktivieren Sie es um diese Applikation zu starten.
<p>
JavaScript é disattivato nel Suo browser. Si prega di attivarlo per usare questa applicazione.
<p>
JavaScript is disabled in your browser. Please enable it to use this application.
<p>
How to?
</div>
</noscript>
<canvas id="app" width="150" height="30"></canvas>
</body>
</html>
Through javascript I am adding other canvas:
//This is the main canvas
this.canvas.style.zIndex = 6;
this.canvas.style.position = "absolute";
this.canvas.style.border = "0px solid";
this.canvas.style.top = 0 + "px";
this.canvas.style.left = 0 + "px";
//Some other canvas elements
var show_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
show_canvas.style.zIndex = 4;
var other_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
other_canvas.style.zIndex = 0;
var another_canvas = document.createElement('canvas');
$(this.canvas).parent().append(show_canvas);
another_canvas.style.zIndex = 3;
another_canvas.attr('id', 'another_canvas');
var container = document.createElement('div');
$(container).attr('id', 'input_container');
$('#another_canvas').append(container);
var user = document.createElement('input');
var pass = document.createElement('input');
$(user).attr('id', 'username');
$(pass).attr('id', 'password');
$(container).append(user);
$(container).append(pass);
$('#input_container').css({
'position': 'absolute',
'z-index': '100'
});
Currently it is looking like this:
It would be awesome, if some of you could help me solve my problem XD.
Putting the canvas and the input in a div with the div having "position: relative;" and the children having "position: absolute;" is the solution. If you want no scrollbars then either make sure the stuff inside the div is smaller than the div OR set "overflow: hidden".
One thing extra, set the canvas display type to "block". Without that the canvas is type "span" which adds space and causes a scrollbar to appear if the canvas is set to be 100%
const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();
body {
margin: 0;
}
#container {
position: relative;
width: 100vw;
height: 100vh;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#form {
position: absolute;
left: 1em;
top: 1em;
padding: 0.5em;
background-color: rgba(0, 0, 0, 0.7);
}
#form input {
font-size: 20pt;
display: block;
border: none;
color: white;
background-color: #444;
margin: 0.5em;
}
<div id="container">
<canvas id="c1"></canvas>
<div id="form">
<input type="text" id="user" placeholder="username">
<input type="password" id="pass" placeholder="password">
</div>
</div>
you had your canvas 150x30? That's pretty small but we can adjust the sizes
const ctx = document.querySelector('#c1').getContext('2d');
const {width, height} = ctx.canvas;
ctx.fillStyle = "#0FF";
ctx.fillRect(0, 0, width, height);
ctx.fillStyle = "#F00";
ctx.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, Math.PI * 2, true);
ctx.fill();
#container {
position: relative;
width: 150px;
height: 30px;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
#form {
position: absolute;
left: 0;
top: 0;
background-color: rgba(0,0,0,0);
}
#form input {
font-size: 8px;
display: block;
background-color: rgba(0,0,0,0);
border: 1px solid gray;
}
<div id="container">
<canvas id="c1"></canvas>
<div id="form">
<input type="text" id="user" placeholder="username">
<input type="password" id="pass" placeholder="password">
</div>
</div>
I want to make something that is like this:
http://www.lessmilk.com/imgtut/FB1/3.gif
But my square dosen't seem to bounce up properly (it should move up to a certain distance then fall back. Like that in example), especially when it is falling, it stops for in same position on first click and then requires second click to move up . What did I do wrong or is it not just tuned properly? Can it be done in some other way? Need help and suggestions.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bounce</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: aqua;
height: 300px;
width: 500px;
position: relative;
}
.square {
height: 25px;
position: absolute;
width: 25px;
background-color: brown;
}
</style>
</head>
<body>
<div class="container" onclick="accelerateUp()">
<div class="square" style="top:0; left:20px"></div>
</div>
<script>
var square = document.querySelector('.square');
var updateInterval, gravitySpeed = 0, gravity = 0.05;
function accelerateUp() {
clearInterval(updateInterval)
gravity = -0.2;
setTimeout(() => { gravity = 0.05 }, 100)
updateInterval = setInterval(() => accelerateDown(), 5)
}
function accelerateDown() {
let topValue = parseInt(square.style.top);
let leftValue = parseInt(square.style.left);
gravitySpeed += gravity;
square.style.top = topValue + gravitySpeed + 'px';
hitBottom();
}
function hitBottom() {
if (parseInt(square.style.top) > 250 || parseInt(square.style.top) < 0) {
gravitySpeed = 0;
}
}
updateInterval = setInterval(() => accelerateDown(), 5);
</script>
</body>
</html>
Instead of having an "accelerateUp" you should just consider setting the velocity to a specific/set value on each click OR changing the velocity by a set amount.
I think part of the problem is trying to manage how the acceleration changes as a result of the click hitting the square up, and I think it's just easier to change the velocity and let the acceleration remain constant.
const square = document.querySelector('.square');
const frameRate = 60; // fps
const yAcceleration = .5; // change in px / frame
const hitUpForce = -10;
let yVelocity = 0; // px / frame
let yPosition = 0; // px
function timeStep() {
// velocity changes position
const willHitGround = yPosition + yVelocity > 275
yPosition = willHitGround ? 275 : yPosition + yVelocity;
// accerlation changes velocity
yVelocity = willHitGround ? 0 : yVelocity + yAcceleration;
square.style.top = `${yPosition}px`
}
function hitUp() {
// just set contant velocity as result of hit
yVelocity = hitUpForce; // Or possibly yVelocity += hitUpForce
}
updateInterval = setInterval(timeStep, 1000/frameRate);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Bounce</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
background-color: aqua;
height: 300px;
width: 500px;
position: relative;
}
.square {
height: 25px;
position: absolute;
width: 25px;
background-color: brown;
}
</style>
</head>
<body>
<div class="container" onclick="hitUp()">
<div class="square" style="top:0; left:20px"></div>
</div>
</body>
</html>
Ok, I just figured it out that I have to reset the gravitySpeed variable to 0 on click (because when falling it's value is negative and that was stoping the ball from jumping on first click). So resetting the variable helped me. I posted the answer here so that it can help someone.
function accelerateUp() {
clearInterval(updateInterval);
gravitySpeed = 0;
gravity = -0.2;
setTimeout(() => { gravity = 0.05 }, 100)
updateInterval = setInterval(() => accelerateDown(), 5)
}
I've done some work with parallax scrolling and resizing my image using javascript, but I cannot figure out how to getting a homepage to line up perfectly with the edge of the window.
The code I have does not line up with the bottom edge of the webpage.
If I do a fix value I can get it to line up; however, depending on whether or not someone has a toolbar it messes up the alignment.
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 2700px;
width: 100%;
margin-top:-10px;
background-color:#4dbbac;
position: relative;
z-index:1;
}
</style>
</head>
<body onresize="myFunction()">
<img id="image" src="IMG.JPG" style="margin:;" />
<div id="content"></div>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var yourImg = document.getElementById('image');
yourImg.height = h;
yourImg.width = w;
}
</script>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .5 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</body>
</html>
i'm not sure if i got your question right but why you dont use bottom property?
image.style.bottom = 0;