Sorry if this is a duplicate I'm new to JS and HTML and I can't figure out what else to do.
I am trying to make (mostly from JS) a way to upload images onto any background you like, then saving them as one image. For now, I am experimenting by putting an image of the scream onto a canvas and then trying to upload an image of my choosing. Currently when I press save image, it saves ONLY the background. Also the background and uploaded image both overflow out of the card, but removing position:absolute in css stops them from overlaying. I've tried stuff with MarvinJ or even just trying to not use canvas, but can't get it to work.
Sorry for the big question, how do I merge an uploaded image and an image of my choosing onto a card and save them as one file?
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type = "text/css" href="blank.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title> Petra image </title>
</head>
<body>
<div class = "wrap">
<div class = "card-container">
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" class = "Card_Image" alt="Image preview...">
</div>
<div class="card_main">
<div id="picHolder">
<img src="" id = "pic" class = "test" height="300" alt="Image preview2" object-fit: cover;>
<img id="scream" class = "scream" width="300" height="480" src="img_the_scream.jpg" alt="The Scream" object-fit: cover;>
</div>
</div>
</div>
</div>
<script src="blank.js"></script>
</body>
CSS:
html, body {
margin: 0;
width:100%;
padding:0;
}
.wrap {
display: flex;
flex-direction: column;
}
.card-container {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
}
.card_main {
width: 300px;
height: 420px;
margin: 12px;
background-color: rgb(0, 0, 0);
padding: 10px;
overflow: hidden;
}
.scream{
position: absolute;
opacity: 0.2;
border: 1px solid #000000;
z-index: 1;
}
Javascript:
function previewFile() {
var preview = document.querySelector('img');
var preview2 = document.querySelector('.test')
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.onloadend = function () {
preview.src = reader.result;
preview2.src = reader.result;
}
if (file) {
reader.readAsDataURL(file);
} else {
preview.src = "";
}
}
window.onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("pic");
var img2 = document.getElementById("scream2");
ctx.drawImage(img, 10, 10);
ctx.globalAlpha = 0.5;
ctx.drawImage(img2, 10, 10);
}
Related
I am using Jcrop to crop Images, it is working fine with small size images, but Whenever I try to put large image like 2080x2080 or 1600x1600 it covers all my screen, also It cannot be handle with CSS like width and height control in Image tag
Seeking Solution/Suggestion -
Any method to put this image in container/div and then zoom-in/out with mouse event ?
Any method to handle large size image in a fix container and crop so that image maintain it's quality.
P.s: you can try with large image in below working example and see how it behaves with big Image.
var jcp;
var save = document.getElementById('save');
var imageLoader = document.getElementById('imageLoader');
var img = document.getElementById("target");
imageLoader.onchange = function handleImage(e) { //handling our image picker <input>:
var reader = new FileReader();
reader.onload = function(event) {
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
save.onclick = function() {
if (jcp && jcp.active) {
var i = 0;
for (area of jcp.crops) {
i++;
canvas = document.createElement("canvas");
canvas.setAttribute('width', area.pos.w);
canvas.setAttribute('height', area.pos.h);
ctx = canvas.getContext("2d");
ctx.drawImage(img, area.pos.x, area.pos.y, area.pos.w, area.pos.h, 0, 0, area.pos.w, area.pos.h);
temp = document.createElement('a');
temp.setAttribute('download', 'area' + i + '.jpg');
temp.setAttribute('href', canvas.toDataURL("image/jpg").replace("image/jpg", "image/octet-stream"));
temp.click();
}
}
};
Jcrop.load('target').then(img => {
jcp = Jcrop.attach(img, {
multi: true
});
});
body {
margin: 0px;
padding: 0px;
background-color: #ededed;
}
.cropapp {
position: absolute;
width: 100%;
height: 100%;
left: 5%;
background: lightgray;
}
.cropbox {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
div {
position: relative;
overflow: hidden;
}
<head>
<title>Jcrop Example</title>
<link href="https://unpkg.com/jcrop#3.0.1/dist/jcrop.css" rel="stylesheet" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://unpkg.com/jcrop#3.0.1/dist/jcrop.js"></script>
</head>
<body>
<div style="width:400px; margin:10px auto; padding:10px 0; overflow:hidden;"><a style="float:right; display:block; padding:10px 15px; color:#fff; background-color:#237dbd; font-size: 14px; font-weight:bold; border-radius:5px;" id="save">Save</a>
<input type="file" id="imageLoader" name="imageLoader" />
<!-- add this for file picker -->
</div>
<div>
<h1 style="font-family:Helvetica,sans-serif;">
Image Crop <span style="color:lightgray;"></span>
</h1>
<img id="target" style="background-size: cover !important;">
</div>
</body>
You can add any fixed width or height value to your <img id="target"/>. Just calculate and apply the change ratio to areas:
canvas = document.createElement("canvas");
displayWidth=img.width;
displayHeight=img.height;
realWidth = img.naturalWidth;
realHeight = img.naturalHeight;
widthRatio = Math.round(realWidth/displayWidth);
heightRatio = Math.round(realHeight/displayHeight);
width=area.pos.w*widthRatio
height=area.pos.h*heightRatio
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);
ctx = canvas.getContext("2d");
ctx.drawImage(img, area.pos.x*widthRatio, area.pos.y*heightRatio, width, height, 0, 0, width, height);
and <img width="500" id="target"/> (or with css #target{width:500px})
I am beginner to web development
I have a problem with my lightbox, i need to use ev.target.nextElementSibling and ev.target.prevElementSibling to go to the next/previous image by clicking at the next arrow.png (img)/ prev arrow.png(img), i have tried everything but i don't know how. When i'm clicking at the image it's zoom in (that's ok) but when i click on the arrow the image is hidding but i want to go to the next/prev image.
const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
for (let index = 0; index < imgs.length; index++) {
const img = imgs[index];
img.addEventListener('click', showLightbox);
}
function showLightbox(ev) {
const prevEl = ev.target.prevElementSibling;
const nextEl = ev.target.nextElementSibling;
console.log(ev)
const lightbox = document.querySelector('.lightbox');
const img = document.querySelector('.lightbox img');
const imgUrl = ev.target.src;
img.src = imgUrl;
lightbox.classList.add('visible');
}
lightbox.addEventListener('click', hideLightbox);
function hideLightbox() {
lightbox.classList.remove('visible');
}
arrowNext.addEventListener('click', nextPhoto);
function nextPhoto(ev) {
const arrowNext = document.querySelector('.arrowNext');
const img = document.querySelector('.arrowNext img');
const imgUrl = ev.target.src;
img.src = imgUrl;
const next = ev.target.nextElementSibling;
}
body {
background: #eee;
}
.lightbox {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
justify-content: center;
align-items: center;
display: flex;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(0);
}
.visible {
transform: scale(1);
}
.lightbox img {
max-width: 80%;
max-height: 80%;
}
.arrowNext {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="gallery">
<img src="/img/img1.jpg" alt="photo1">
<img src="/img/img2.jpg" alt="photo2">
<img src="/img/img3.jpg" alt="photo3">
<img src="/img/img4.jpg" alt="photo4">
</section>
<div class="lightbox">
<div class="arrowPrev">
<img src="/img/prev arrow.png" alt="">
</div>
<img src="/img/img5.jp" alt="">
<div class="arrowNext">
<img src="/img/next arrow.png" alt="">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
Be aware that ev.target is the the element the mouse clicks on, in your case the arrow. You're looking to get the next image, not the next arrow.
I'd advise using an index variable to get which image is presented and then doing document.querySelectorAll('img')[index+1] to get the next image.
With what your code could give:
(Be aware that ev.stopPropagation() is needed to prevent closing the lightbox when the arrow is clicked.)
const imgs = document.querySelectorAll('.gallery img');
const lightbox = document.querySelector('.lightbox');
const arrowNext = document.querySelector('.arrowNext');
var index = 0;
for (let index = 0; index < imgs.length; index++) {
const img = imgs[index];
img.addEventListener('click', (e) => {showLightbox(e, index)});
}
function showLightbox(ev, i) {
const prevEl = ev.target.prevElementSibling;
const nextEl = ev.target.nextElementSibling;
const lightbox = document.querySelector('.lightbox');
const img = document.querySelector('.lightbox img');
const imgUrl = ev.target.src;
img.src = imgUrl;
index = i;
lightbox.classList.add('visible');
}
lightbox.addEventListener('click', hideLightbox);
function hideLightbox() {
lightbox.classList.remove('visible');
}
arrowNext.addEventListener('click', nextPhoto);
function nextPhoto(ev) {
ev.stopPropagation();
index++;
const arrowNext = document.querySelector('.arrowNext');
const img = document.querySelector('.arrowNext img');
const imgUrl = imgs[index].src;
img.src = imgUrl;
}
body {
background: #eee;
}
.lightbox {
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
top: 0;
left: 0;
justify-content: center;
align-items: center;
display: flex;
transition: all 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
transform: scale(0);
}
.visible {
transform: scale(1);
}
.lightbox img {
max-width: 80%;
max-height: 80%;
}
.arrowNext {
cursor: pointer;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lightbox</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="gallery">
<img src="/img/img1.jpg" alt="photo1">
<img src="/img/img2.jpg" alt="photo2">
<img src="/img/img3.jpg" alt="photo3">
<img src="/img/img4.jpg" alt="photo4">
</section>
<div class="lightbox">
<div class="arrowPrev">
<img src="/img/prev arrow.png" alt="">
</div>
<img src="/img/img5.jp" alt="">
<div class="arrowNext">
<img src="/img/next arrow.png" alt="" style="background:red;padding:20px">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
This is the used for upload,crop,cut then display image,
but I want to display cropped image and (x1,y1,), (x2,y2) coordinates of cropped image.
<!DOCTYPE html>
<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, shrink-to-fit=no">
<title>Cropper.js</title>
<link rel="stylesheet" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">
<style>
.page {
margin: 1em auto;
max-width: 768px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.box {
padding: 0.5em;
width: 100%;
margin:0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.options label,
.options input{
width:4em;
padding:0.5em 1em;
}
.btn{
background:white;
color:black;
border:1px solid black;
padding: 0.5em 1em;
text-decoration:none;
margin:0.8em 0.3em;
display:inline-block;
cursor:pointer;
}
.hide {
display: none;
}
img {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<main class="page">
<h2>Upload ,Crop and save.</h2>
<!-- input file -->
<div class="box">
<input type="file" id="file-input">
</div>
<!-- leftbox -->
<div class="box-2">
<div class="result" id="image"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<form><img alt="" class="cropped" src=""></form>
</div>
<!-- input file -->
<div class="box">
<div class="options hide">
<label> Width</label>
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save hide" >Save</button>
<!-- download btn -->
</div>
</main>
</div>
</div><br><br><br><br><br>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>
<script>
// vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e)=> {
if(e.target.result){
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
// cropped value
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click',(e)=>{
e.preventDefault();
// get result to data uri
let imgSrc = cropper.getCroppedCanvas({
width: img_w.value // input value
}).toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
dwn.classList.remove('hide');
dwn.download = 'imagename.png';
dwn.setAttribute('value',imgSrc);
});
</script>
</body>
</html>
Please can anyone help me? How do I find (x1,y1,), (x2,y2) coordinates of cropped image? I have some idea about that: First find (x1,y1,) and width and height of cropped image then x2=x1+width , y2=y1+width, but I don't know how to apply. Please help me with how apply this to Javascript or jQuery.
Working example with both: absolute canvas coordinates and relative image coordinates:
// vars
let result = document.querySelector('.result'),
img_result = document.querySelector('.img-result'),
img_w = document.querySelector('.img-w'),
img_h = document.querySelector('.img-h'),
options = document.querySelector('.options'),
save = document.querySelector('.save'),
cropped = document.querySelector('.cropped'),
dwn = document.querySelector('.download'),
upload = document.querySelector('#file-input'),
cropper = '';
// on change show image with crop options
upload.addEventListener('change', (e) => {
if (e.target.files.length) {
// start file reader
const reader = new FileReader();
reader.onload = (e) => {
if (e.target.result) {
// create new image
let img = document.createElement('img');
img.id = 'image';
img.src = e.target.result
// clean result before
result.innerHTML = '';
// append new image
result.appendChild(img);
// show save btn and options
save.classList.remove('hide');
options.classList.remove('hide');
// init cropper
cropper = new Cropper(img);
// cropped value
}
};
reader.readAsDataURL(e.target.files[0]);
}
});
// save on click
save.addEventListener('click', (e) => {
let cropLeft = cropper.cropBoxData.left;
let cropTop = cropper.cropBoxData.top;
let cropRight = cropLeft + cropper.cropBoxData.width;
let cropBottom = cropTop + cropper.cropBoxData.height;
let info = "Crop region (absolute canvas coordinates):\n" +
"(x1, y1) = (" + cropLeft + ", " + cropTop + ")\n" +
"(x2, y2) = (" + cropRight + ", " + cropBottom + ")\n";
let zoom = cropper.image.offsetHeight / cropper.image.naturalHeight;
let naturalWidth = (cropRight - cropLeft) / zoom;
let naturalHeight = (cropBottom - cropTop) / zoom;
let relativeLeft = (cropper.cropBoxData.left - cropper.canvasData.left);
let relativeTop = (cropper.cropBoxData.top - cropper.canvasData.top);
let naturalLeft = relativeLeft / zoom;
let naturalTop = relativeTop / zoom;
let naturalRight = naturalLeft + naturalWidth;
let naturalBottom = naturalTop + naturalHeight;
info += "\nCrop region (image coordinates):\n" +
"(x1, y1) = (" + naturalLeft + ", " + naturalTop + ")\n" +
"(x2, y2) = (" + naturalRight + ", " + naturalBottom + ")\n";
alert(info);
e.preventDefault();
// get result to data uri
let croppedImg = cropper.getCroppedCanvas({
width: img_w.value // input value
});
let imgSrc = croppedImg.toDataURL();
// remove hide class of img
cropped.classList.remove('hide');
img_result.classList.remove('hide');
// show image cropped
cropped.src = imgSrc;
});
.page {
margin: 1em auto;
max-width: 768px;
display: flex;
align-items: flex-start;
flex-wrap: wrap;
height: 100%;
}
.box {
padding: 0.5em;
width: 100%;
margin: 0.5em;
}
.box-2 {
padding: 0.5em;
width: calc(100%/2 - 1em);
}
.options label,
.options input {
width: 4em;
padding: 0.5em 1em;
}
.btn {
background: white;
color: black;
border: 1px solid black;
padding: 0.5em 1em;
text-decoration: none;
margin: 0.8em 0.3em;
display: inline-block;
cursor: pointer;
}
.hide {
display: none;
}
img {
max-width: 100%;
}
<!DOCTYPE html>
<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, shrink-to-fit=no">
<title>Cropper.js</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro|Open+Sans+Condensed:300|Raleway' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="
https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css
">
</head>
<body>
<div class="container">
<h1>Cropper with a range of aspect ratio</h1>
<div>
<main class="page">
<h2>Upload ,Crop and save.</h2>
<!-- input file -->
<div class="box">
<input type="file" id="file-input">
</div>
<!-- leftbox -->
<div class="box-2">
<div class="result" id="image"></div>
</div>
<!--rightbox-->
<div class="box-2 img-result hide">
<form><img alt="" class="cropped" src=""></form>
</div>
<!-- input file -->
<div class="box">
<div class="options hide">
<label> Width</label>
<input type="number" class="img-w" value="300" min="100" max="1200" />
</div>
<!-- save btn -->
<button class="btn save hide">Save</button>
<!-- download btn -->
</div>
</main>
</div>
</div><br><br><br><br><br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/0.8.1/cropper.min.js
"></script>
</body>
</html>
I have write a JavaScript code to perform a slide show but it's not working onload when i assign it to a <a> it works but not work onload
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide Show</title>
<meta name="author" content="Jenz" />
<!-- Date: 2014-07-18 -->
<script>
var slideImg;
var picNo = 0;
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
};
function slide() {
slideImg.src = images[picNo].src;
if (picNo < 2) {
picNo++;
} else {
picNo = 0;
}
timer = setTimeout(slide, 1000);
};
</script>
</head>
<body>
<div style="margin-left: auto; margin-right: auto; width: 900px">
<div id="slideShowAndNav" style="margin: auto; width: 700px;">
<img id="slideShowImage" name="slideshow" src="Images/image1.jpg" style="border-radius: 0px 0px 0px 250px; position: absolute; top: -50; left: -50; z-index: 1;" border="1px" />
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
</div>
</div>
</body>
</html>
Please look at the code and tell me what should i do and other thing i have a navigation which code is
<a style="display: block; height: 40px; width: 40px; background-color: red; border-radius: 20px; text-align: center; position: absolute; z-index: 2; margin-top: 130px;" href="">Home</a>
i want this <a> in a circle as i did with border-radius and now i want it's
Text in the center like Home in the middle of the circle help me also with this
i want this in a circle as i did with border-radius and now i want it's Text in the center like Home in the middle of the circle help me also with this
For this, use:-
style="border-radius:100px; text-align:center;"
The "xmlns" attribute is invalid in HTML 4.01. (You can change your doctype.)
Also, it is more common practice to create your function.
function blaah(blaah){
blaah
}
And then add an onload event handler, either with an event listener, or add this code to your body tag,
<body onload="blaah('blaah')">
or, you could add this code in your script tags, but outside of the function.
blaah("blaah");
Call slide function.
window.onload = function() {
slideImg = document.getElementById('slideShowImage');
images = new Array();
images[0] = new Image();
images[0].src = "Images/image1.jpg";
images[1] = new Image();
images[1].src = "Images/image2.jpg";
images[2] = new Image();
images[2].src = "Images/image3.jpg";
slide();
};
I am using EaselJS, and for some reason my canvas isn't showing the image as a background even though this is how tutorials do it. My HTML file is as so:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Requiescat in Pace</title>
...lots of .js imports for EaselJS
<script type="text/javascript" src="RIPwitheasel.js"></script>
<style>
canvas {
position: absolute;
left: 0;
right: 0;
top: 10%;
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
width: 800px;
background: transparent;
}
</style>
<link rel="stylesheet" type="text/css" href="style_2.css">
</head>
<body onload="init()">
<font color = white>
<img alt = "full screen bg img" src = "images/backgrounds/pagebackground.jpg" id = "full-screen-background-image"/>
<div style="position: relative">
<h1 style="position: fixed; width:100%; text-align: center"> <strong> Requiescat In Pace </strong> </h1>
<p style = "text-align: center"> Prototype 1 </p>
</div>
<form action="" style = "position: fixed; top: 0; width: 100% text-align: center" >
<input type="button" value="Donate!!!">
</form>
<div style="position: relative">
<p style="position: fixed; bottom: 0; width:100%; text-align: center"> Credits: To be added</p>
</div>
<canvas id="gameCanvas" width="1000" height="736">
Your browser does not support canvas. Please try again with a different browser.
</canvas>
</font>
</body>
</html>
And my RIPwitheasel.js is this:
var stage;
function init()
{
var canvas = document.getElementById("gameCanvas");
stage = new createjs.Stage(canvas);
var background = new createjs.Bitmap("images/backgrounds/grass-tiled.png");
stage.addChild(background);
createjs.Ticker.setFPS(60);
stage.update();
}
function tick()
{
stage.update();
}
What is it that is incorrectly defined? All of the page displays correctly but the canvas doesn't display the image. I get zero run-time errors in the browser console for the js file.
EDIT: I just realized that if I use a .jpg file instead of a .png file it loads it. Why is this?
See this answer from CreateJS developer: https://stackoverflow.com/a/20682883/1996480
Here's how you could use PreloadJS to load your background:
var queue = new createjs.LoadQueue();
queue.on("complete", handleComplete, this);
queue.loadFile({id:"myBackground", src:"images/backgrounds/grass-tiled.png"});
function handleComplete() {
var image = queue.getResult("myBackground");
stage.addChild(image);
}