So I've looked around at page to page functions and have seen mixed techniques.
I have a full canvas animation with clicking and keyboard functionality and all, but I want to have a screen prior that is blank and just has a button that says Start.
Would I have to make a new html file? Or a function that clears the canvas and has the button on it that transitions to the animation? And how does the general set up for that look like?
Same Page Solution
Create a div container. Make everything in the container have display none except for the start button. When the start button is pressed, a JS function is run which sets everything in the container to the proper display property and makes the start button invisible. Not that manipulating the DOM is a costly operation and should be done sparingly. http://jsfiddle.net/qrj3Lxb5/1/
HTML
<body>
<div>
<canvas id="myCanvas"></canvas>
<button id="btn" onclick="start(this.id)">Start</button>
</div>
</body>
CSS
#myCanvas {
display: none
}
#btn {
margin: 0 auto;
}
div {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center
}
html {
height: 100%
}
body {
height: 100%
}
JS
var start = function(id) {
var c = document.getElementById("myCanvas");
c.style.display = "inline-block";
var btn = document.getElementById(id);
btn.style.display = "none";
}
document.addEventListener("DOMContentLoaded", function(event) {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
});
You can alternatively have a new html page for the canvas. Up to you.
Related
I'm creating an image gallery and whenever I click on the image, it displays it fully across the screen. However, whenever I try to click off of it and return to the normal website screen, the image is completely gone.
Here is a codepen showing the problem https://codepen.io/designextras/pen/WNrQMdM
In the html I am targeting the image tag by using firstElementChild in my Javascript for ".services-cell"
<div class="services-cell">
<img class="services-cell_img" src="gallery/img-1.jpg" alt="">
<div class="services-cell_text">Digital Marketing</div>
</div>
Here is the Javascript, it is also in the codepen above
let galleryImages = document.querySelectorAll('.services-cell');
let getLatestOpenedImg;
let windowWidth = window.innerWidth;
if(galleryImages) {
galleryImages.forEach(function(image, index){
image.onclick = function() {
console.log(image.firstElementChild);
getLatestOpenedImg = index + 1;
let container = document.body;
let newImgWindow = document.createElement('div');
container.appendChild(newImgWindow);
newImgWindow.setAttribute('class', 'img-window');
newImgWindow.setAttribute('onclick', 'closeImg()');
let newImg = image.firstElementChild;
newImgWindow.appendChild(newImg);
newImg.classList.remove('services-cell_img');
newImg.classList.add('popup-img');
}
})
}
function closeImg() {
document.querySelector('.img-window').remove();
}
and here is the CSS classes that I'm trying to add whenever I click on the image
.img-window {
width: 100vw;
height:100vh;
background: rgba(0,0,0,0.8);
position: fixed;
top: 0;
left: 0;
z-index: 100;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
}
.popup-img {
max-height: 80vh;
max-width: 80vw;
z-index: 200;
}
So the bottom function closeImg() seems to be the problem, but I don't know else I'd write my code in order to close out the image pop up and return to the screen without it completely removing my image from the html
When you append the image to newImgWIndow, you're removing it from its original DIV. You should clone the image instead of moving it.
let newImg = image.firstElementChild.cloneNode();
newImgWindow.appendChild(newImg);
newImg.classList.remove('services-cell_img');
newImg.classList.add('popup-img');
I'm trying to create a stylised timeline for an audio player. I would like to draw a nice thick line with round caps at the ends. I thought it would be relatively trivial to do this with canvas. However, I'm finding that at least in Chrome on Mac OS, the lines are not anti-aliased; and also (possibly as a consequence) the line caps are elongated, rather than perfect half-circles.
What perplexes me is that when I view the W3 Schools example the line is anti-aliased, with the expected caps. This makes me wonder if something in my code is triggering a non-anti-aliased mode in the browser...
Here is my full code:
<html>
<head>
<style>
body {
background-color: #212b69;
}
.centering {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#timeline {
width: 60%;
height: 50px;
}
</style>
</head>
<body>
<div class="centering">
<canvas id="timeline" />
</div>
<script type="text/javascript">
var timeline = document.getElementById('timeline');
var ctx = timeline.getContext('2d');
var centrline = timeline.height/2;
// ctx.translate(0.5, 0.5); // I have tried the half-pixel trick
// line settings
ctx.lineCap = "round";
ctx.lineWidth = 30;
ctx.strokeStyle = "white";
// draw test stroke
ctx.beginPath();
ctx.moveTo(20, centrline);
ctx.lineTo(60, centrline+10); // offset to show aliasing of edges
ctx.stroke();
</script>
</body>
</html>
My result:
Compared with W3Schools result:
I understand from these posts that vector anti-aliasing is determined by the browser. Note also that I've tried the trick of translating the canvas by a half-pixel to kick it into anti-aliasing mode. If there is no way to get canvas to get what I want it to do, is there some other method? Given that I only want to create a relatively simple shape...
Just remove the following css rule and the shape will stop skewing.
#timeline {
width: 60%;
height: 50px;
}
Here's a working example without skew: enter link description here
var timeline = document.getElementById('timeline');
var ctx = timeline.getContext('2d');
var centrline = timeline.height/2;
// ctx.translate(0.5, 0.5); // I have tried the half-pixel trick
// line settings
ctx.lineCap = "round";
ctx.lineWidth = 30;
ctx.strokeStyle = "white";
// draw test stroke
ctx.beginPath();
ctx.moveTo(20, centrline);
ctx.lineTo(60, centrline+10); // offset to show aliasing of edges
ctx.stroke();
body {
background-color: #212b69;
}
.centering {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="centering">
<canvas id="timeline" />
</div>
I'm coding a p5.js game and i have to draw a button, an input and a p html elements over my canvas. I wanna have all this elements centered relative to the canvas.
I tried this solution without success:
var gameCanvas = createCanvas(600, 600);
gameCanvas.parent("game-container");
input = createInput();
input.position(280, 300);
input.parent("game-container");
I have a div with game-cointainer id and this work until i center the div by css. When I center the div the canvas get centered but the input position remain relative to the div and not to the canvas.
So this is a responsive html page powered with MDL framework. If i center the canvas with "mdl-layout-spacer" div before and after my "game-container" div, the canvas stay to the center but input remain to left (300 px from the left of my game-container div).
If i center the game-container div with mdl col offset both inout and canvas are centered but i lose the responsive center. Anyone that is good with p5.js know how i can solve this problem?
This is because you are loading the input object before you load the CSS page. Either put the script tag after the css tag, or put
input = createInput();
input.position(280, 300);
input.parent("game-container");
into your setup() function.
Your problem is that the p5 button is position absolute
Solution:
Create a div called container. Apply some flexbox so the children are centred
#container {
min-height: 100vh; /*vertical center*/
min-height: -webkit-fill-available; /*mobile viewport bug fix*/
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
Now add a div sketch to your container. The sketch will be centred vertically and horizontally. It's important to add this div because its size will be equal to your canvas size. You can then add the button to this canvas. The sketch div needs position: relative to override the absolute position of the button
#sketch {
position: relative;
}
Now you can create your canvas and button. Then add both of them to the sketch
function setup() {
let canvas = createCanvas(100, 100);
canvas.parent("sketch");
background(0);
button = createButton('click me');
button.mousePressed(changeBG);
button.position(0, 0);
button.parent("sketch");
}
function changeBG() {
let val = random(255);
background(val);
}
The result is a vertically and horizontally centred sketch with a button relative to the sketch top left. Please try the example below. I coloured the divs for you. Container:red, Sketch:green, Canvas: grey values. You won't see much green because its covered with the Canvas
function changeBG() {
let val = random(255);
background(val);
}
function setup() {
let canvas = createCanvas(100, 100);
canvas.parent("sketch");
background(0);
let button = createButton('click me');
button.position(0, 0);
button.mousePressed(changeBG);
button.parent("sketch");
}
body {
margin: 0;
}
#container {
min-height: 100vh; /* mobile viewport bug fix */
min-height: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
position: relative;
background-color: red;
}
#sketch {
position: relative;
background-color: green;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js" integrity="sha512-N4kV7GkNv7QR7RX9YF/olywyIgIwNvfEe2nZtfyj73HdjCUkAfOBDbcuJ/cTaN04JKRnw1YG1wnUyNKMsNgg3g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<div id="container">
<div id="sketch">
</div>
</div>
</body>
</html>
I hope I was able to help you guys. Have a nice day
I have a problem to get my window size, I try this code:
Javascript
var game;
function game() {
this.canvas = document.getElementById('canvas');
this.canvasWidth = window.innerWidth;
this.canvasHeight = window.innerHeight;
this.initCanvas = function() {
this.canvas.style.width = this.canvasWidth + "px";
this.canvas.style.height = this.canvasHeight + "px";
}
this.run = function() {
this.initCanvas();
}
}
game = new game();
game.run();
I also have
CSS
html, body {
padding: 0;
margin: 0;
}
I only have a canvas in my body.
Problem is, that I have a vertical and horizontal scroll bar. This means the size of canvas is too large. How to make it of the window size without the scroll bars appearing?
It looks like you're just trying to make your canvas have a width and height of 100%. You can do this with just css:
HTML
<body>
<canvas id="canvas"></canvas>
</body>
CSS
body, html {
height: 100%;
width: 100%;
margin: 0px;
}
canvas {
background: #ffcccc;
height: 100%;
width: 100%;
display: block;
}
Demo
Or if you want to use your code but get rid of the scroll bars on the window, you need to specify block on the canvas tag.
CSS
canvas {
display: block;
}
Demo
When you use CSS to style your <canvas> element it will get scaled instead of sized. Be sure to set the .width and .height properties on the canvas element instead (ie canvas.width not canvas.style.width).
jsfiddle example
In the example the first canvas element is scaled correctly, the second (using CSS) is not scaled properly. This has to do with a default canvas element size (300x150) that CSS scales.
To prevent getting scrollbars when setting the <canvas> to the full window width/height set the body to overflow:hidden; as used in the jsfiddle above.
I've found mixed evidence about whether it's feasible to create a dynamic background with the HTML5 canvas element. Here's a guy who seems to have successfully done it:
http://radikalfx.com/files/anibg/
I have successfully positioned my canvas element as a background, but it has rendered my links unclickable. Here's the situation:
HTML:
<div id='container'>
... other header stuff ...
<canvas id='background'>
</canvas>
<!-- Can't touch this *MC Hammer Shuffle* -->
<a href='#'>test</a>
... footer stuff ...
</div>
CSS:
/* Everything's z-index is now 1 */
#container
{
position: relative;
min-height:100%;
width:100%;
z-index:1;
}
/* Make the canvas z-index 0 */
#background
{
position: absolute;
top: 0;
width:100%;
height:100%;
z-index: 0;
}
JavaScript:
// Onload Draw an ellipse
// I've got jCanvas installed (jQuery plugin) to use the drawArc() method
// This bit can be replaced with whatever test code you want.
function load()
{
init_canvas();
$("canvas").drawArc({
fillStyle: "black",
x: 100, y: 100,
radius: 50
});
}
// Make the canvas the appropriate size
function init_canvas()
{
canvas = document.getElementById("background");
canvas.width = document.width;
canvas.height = document.height;
canvasW = canvas.width;
canvasH = canvas.height;
}
Cheers!
You use #container in your CSS to give everything else a z-index of 1, yet you never put an element #container on the page.
Change your HTML to the following and it will work as expected:
<canvas id='background'></canvas>
<div id="container">
<a href='#'>test</a>
</div>
JSFiddle: http://jsfiddle.net/ht6c8/
every element with the position: absolute is being placed over other not positioned item, even if other elements are placed in DOM after. So you can just set position: relative for your anchor element