Is it possible to create html links out of text that is rendered in a canvas element?
There is no easy way. You will have to draw the link text onto the canvas and then check for mouseclicks. Here is a demo html page:
<html>
<head>
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx;
var linkText="https://stackoverflow.com";
var linkX=5;
var linkY=15;
var linkHeight=10;
var linkWidth;
var inLink = false;
// draw the balls on the canvas
function draw(){
canvas = document.getElementById("myCanvas");
// check if supported
if(canvas.getContext){
ctx=canvas.getContext("2d");
//clear canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//draw the link
ctx.font='10px sans-serif';
ctx.fillStyle = "#0000ff";
ctx.fillText(linkText,linkX,linkY);
linkWidth=ctx.measureText(linkText).width;
//add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
}
}
//check if the mouse is over the link and change cursor style
function on_mousemove (ev) {
var x, y;
// Get the mouse position relative to the canvas element.
if (ev.layerX || ev.layerX == 0) { //for firefox
x = ev.layerX;
y = ev.layerY;
}
x-=canvas.offsetLeft;
y-=canvas.offsetTop;
//is the mouse over the link?
if(x>=linkX && x <= (linkX + linkWidth) && y<=linkY && y>= (linkY-linkHeight)){
document.body.style.cursor = "pointer";
inLink=true;
}
else{
document.body.style.cursor = "";
inLink=false;
}
}
//if the link has been clicked, go to link
function on_click(e) {
if (inLink) {
window.location = linkText;
}
}
</script>
</head>
<body onload="draw()">
<center>
<canvas id="myCanvas" width="200" height="200" style="border-style:solid;border-width:1px">Canvas not supported.</canvas>
</center>
</body>
</html>
This example shows how you can add multiple links to your HTML canvas:
<!DOCTYPE html>
<!-- This page shows how to add multiple links to <canvas> (by Yakovenko Max) -->
<html>
<head>
<title>Canvas Links Example</title>
<script>
function OnLoad(){
// Get canvas
var canvas = document.getElementById("myCanvas");
// 2d context
var ctx = canvas.getContext("2d");
ctx.translate(0.5, 0.5); // * Move the canvas by 0.5px to fix blurring
// Block border
ctx.strokeStyle = "#5F7FA2";
ctx.strokeRect(50, 50, 185, 90);
// Photo
var img = new Image();
img.src = "http://www.cs.washington.edu/education/courses/csep576/05wi/projects/project4/web/artifact/liebling/average_face.gif";
img.onload = function(){
ctx.drawImage(img, 59.5, 59.5); // Use -0.5px on photos to prevent blurring caused by * fix
}
// Text
ctx.fillStyle = "#000000";
ctx.font = "15px Tahoma";
ctx.textBaseline = "top";
ctx.fillText("Username", 95, 65);
// ***** Magic starts here *****
// Links
var Links = new Array(); // Links information
var hoverLink = ""; // Href of the link which cursor points at
ctx.fillStyle = "#0000ff"; // Default blue link color
ctx.font = "15px Courier New"; // Monospace font for links
ctx.textBaseline = "top"; // Makes left top point a start point for rendering text
// Draw the link
function drawLink(x,y,href,title){
var linkTitle = title,
linkX = x,
linkY = y,
linkWidth = ctx.measureText(linkTitle).width,
linkHeight = parseInt(ctx.font); // Get lineheight out of fontsize
// Draw the link
ctx.fillText(linkTitle, linkX, linkY);
// Underline the link (you can delete this block)
ctx.beginPath();
ctx.moveTo(linkX, linkY + linkHeight);
ctx.lineTo(linkX + linkWidth, linkY + linkHeight);
ctx.lineWidth = 1;
ctx.strokeStyle = "#0000ff";
ctx.stroke();
// Add mouse listeners
canvas.addEventListener("mousemove", on_mousemove, false);
canvas.addEventListener("click", on_click, false);
// Add link params to array
Links.push(x + ";" + y + ";" + linkWidth + ";" + linkHeight + ";" + href);
}
// Link hover
function on_mousemove (ev) {
var x, y;
// Get the mouse position relative to the canvas element
if (ev.layerX || ev.layerX == 0) { // For Firefox
x = ev.layerX;
y = ev.layerY;
}
// Link hover
for (var i = Links.length - 1; i >= 0; i--) {
var params = new Array();
// Get link params back from array
params = Links[i].split(";");
var linkX = parseInt(params[0]),
linkY = parseInt(params[1]),
linkWidth = parseInt(params[2]),
linkHeight = parseInt(params[3]),
linkHref = params[4];
// Check if cursor is in the link area
if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)){
document.body.style.cursor = "pointer";
hoverLink = linkHref;
break;
}
else {
document.body.style.cursor = "";
hoverLink = "";
}
};
}
// Link click
function on_click(e) {
if (hoverLink){
window.open(hoverLink); // Use this to open in new tab
//window.location = hoverLink; // Use this to open in current window
}
}
// Ready for use ! You are welcome !
drawLink(95,93,"http://www.facebook.com/","Me at facebook");
drawLink(95,110,"http://plus.google.com/","Me at G+");
}
</script>
</head>
<body onload="OnLoad();">
<canvas id="myCanvas" width="450" height="250" style="border:1px solid #eee;">
Canvas is not supported in your browser ! :(
</canvas>
</body>
</html>
There is nothing built in to do it, but you can emulate the function of links if you wanted to. You can remember where the text is, color it differently, give it a different cursor when the user mouses-over that area, and redirect the user to another page when he or she clicks on it.
I think another easy idea is to put a div at the position where you want the link to appear on the canvas and put your link at the div. All you will have to do is to position and style the div correctly.
"I think another easy idea is to put a div at the position where you want the link to appear on the canvas and put your link at the div. All you will have to do is to position and style the div correctly." -Shamaila Tahir
I personally like the idea of using links on top of the canvas and here is a full page sized canvas example. You could use this example for many things, and not just the canvas, so why not get comfortable with it. `
<!DOCTYPE html>
<HEAD>
<style type="text/css">
html { height: 100%; width: 100%; overflow: hidden; }
body {
position: absolute;
height: 100%;
width: 100%;
overflow:hidden;
}
#contactBackground{
position: absolute;
height:100%;
width: 100%;
border: 2px solid green;
}
#contactBackground:hover{
border: 2px solid red;}
#contact{
position: absolute;
height:15%;
top: 52%;
left:70%;
width: 10%;
background-size:20%,20%;
}
#onOff{
position: absolute;
height:15%;
top: 52%;
left:20%;
width: 10%;
background-size:20%,20%;
}
#onOff:hover{border: 2px solid red;}
</style><TITLE>Kewl!! Buttons and Links with Canvas</TITLE></HEAD>
<script type="text/javascript">
window.addEventListener('load', canvas, false);
function canvas(){
var link="contact";
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
contact = document.getElementById("contact");
onOff = document.getElementById("onOff");
document.getElementById("onOff").style.visibility="visible";
switchLinks(link);
function switchLinks(isLink){
if(isLink!="contact"){
document.getElementById("contact").style.visibility="hidden";
}
if(isLink=="contact"){
document.getElementById("contact").style.visibility="visible";
}
}
onOff.addEventListener("mousedown",contactFunction, false);
function contactFunction(){
if(link=="contact"){link="";}else{link="contact";}
switchLinks(link);
}
}
</script><body>
<canvas id="canvas" width="0" height="0">Your browser does not support the HTML 5 Canvas.
</canvas>
<span id="contact" style="display:hidden">
<img id="contactBackground" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQP5qi1TPhjAPOfbogNgppFdc4r1LoNmr5D1n-NBfr7ll3x9VlY9w" alt="Send a message" title="Email" />
</span>
<img id="onOff" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRXvh9Fej5ZhBQstjlSpQbRLx46h47KS2IO_WIfoyyrHk_essLU" style="display:hidden" />
</body></HTML>``
A simpler solution can be implemented by using a mousedown event listener. First create two arrays for the x and y coordinates of your links on the canvas. Then test if a click was within a range of a link on a mouseup. It it was, use a window.open('http://myurl.com') method to open the link.
var links = ['Google','Yahoo','Bing','Baidu','DuckDuckGo'];
var coordx = [425,332,251,306,458];
var coordy = [267,402,335,304,438];
myCanvas.mousedown(function(e){
lastEvent = e;
mouseDown = true;
}).mouseup(function(){
if((lastEvent.offsetX) > (coordx[0] - 5) &&
(lastEvent.offsetX) <= (coordx[0] + 5) &&
(lastEvent.offsetY) > (coordy[0] - 5) &&
(lastEvent.offsetY) < (coordy[0] + 5)){
// use a console.log('x = "+lastEvent.offsetX) first to find the coordinates and ranges for the links.
// link to 1st url in myArray
window.open('http://myFirstURL.com');
} `
});
You will need tests for each set of coordinates, or you can specify a variable for a current active link.
This is my first stackoverflow post. Thanks to all you guys who have helped me over the years.
Related
UPDATE: Link to JSFiddle with workable code
I'm making a website and have created a stack of two canvas elements: the top canvas context is a white rectangle that "erases" to reveal an image loaded into the bottom canvas context. The functionality works properly. My issue is that a thin grey border appears on the right and bottom sides of the canvas stack when I include a setInterval line of code.
It disappears when I remove this timer variable (see code below) but reappears if I add any type of state check like onmouseout to the canvas elements. Here is a screenshot:
Any idea why this is happening? Similar SO questions/solutions have not solved my problem.
window.onload = function() {
var speaker = document.getElementById('speaker');
//speaker.onload = MoveElement(speaker, "right", 1000);
//Create canvases & contexts
var canvas = document.getElementById('canvas');
var ctxB = canvas.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctxT = canvas2.getContext('2d');
//Get waterfall image object
var waterfall = document.getElementById('waterfall');
//Set canvas w&h properties
canvas.width = canvas2.width = .3*waterfall.width;
canvas.height = canvas2.height = .3*waterfall.height;
//Populate Bottom canvas with waterfall image
ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);
//Populate Top canvas with white rectangle
ctxT.fillStyle = "white";
ctxT.fillRect(0, 0, canvas2.width, canvas2.height);
//Make Top canvas "erasable"
canvas2.addEventListener('mousemove', event => {
var x = event.offsetX;
var y = event.offsetY;
const eraseSize = 15;
ctxT.clearRect(x-eraseSize/2, y-eraseSize/2, eraseSize, eraseSize);
});
}
//Set interval timer to repeatedly execute TransparencyCheck()
var timer = setInterval(TransparencyCheck, 500);
//Check that all pixel alpha values = 0
function TransparencyCheck() {
var canvas2 = document.getElementById('canvas2');
var ctxT = canvas2.getContext('2d');
var imageDataTop = ctxT.getImageData(0, 0, canvas2.width, canvas2.height);
var counter = 0;
for (var i = 3; i < imageDataTop.data.length; i += 4) {
if (imageDataTop.data[i] == 0) {
counter++;
}
if (counter == imageDataTop.data.length/4) {
canvas2.style.opacity = "0";
}
}
}
#stack {
position: relative;
}
#stack canvas {
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%);
margin-top: 150px;
}
<img hidden src="https://sample-videos.com/img/Sample-jpg-image-50kb.jpg" alt="issue here" id="waterfall" />
<div id="stack">
<canvas id="canvas"></canvas>
<canvas id="canvas2" onmouseout="TransparencyCheck()"></canvas>
</div>
The problem is that the dimensions of the canvas are being calculated as a fraction (0.3) of the dimensions of the underlying image. This can result in a 'part pixel' problem. That is the system has to decide how to show a fraction of a CSS pixel, and on modern screens several screen pixels are used to show one CSS pixel. A screen pixwl can get 'left behind' (ie still showing) during this process.
A slightly hacky way of getting round this (but I know of no other) is to decrease the size of the bottom canvas by a few pixels so that we are absolutely sure any left overs are under the white of the top canvas at the start.
This snippet makes doubly sure by taking 2px off the width and height.
Incdentally, I copied the code from the codepen pointed at by the question and it worked as an SO snippet OK. Here it is:
window.onload = function() {
var speaker = document.getElementById('speaker');
//speaker.onload = MoveElement(speaker, "right", 1000);
//Create canvases & contexts
var canvas = document.getElementById('canvas');
var ctxB = canvas.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctxT = canvas2.getContext('2d');
//Get waterfall image object
var waterfall = document.getElementById('waterfall');
//Set canvas w&h properties
canvas.width = canvas2.width = .3 * waterfall.width;
canvas.width = canvas.width - 2;
canvas.height = canvas2.height = .3 * waterfall.height;
canvas.height = canvas.height - 2;
//Populate Bottom canvas with waterfall image
ctxB.drawImage(waterfall, 0, 0, canvas.width, canvas.height);
//Populate Top canvas with white rectangle
ctxT.fillStyle = "white";
ctxT.fillRect(0, 0, canvas2.width, canvas2.height);
//Make Top canvas "erasable"
canvas2.addEventListener('mousemove', event => {
var x = event.offsetX;
var y = event.offsetY;
const eraseSize = 15;
ctxT.clearRect(x - eraseSize / 2, y - eraseSize / 2, eraseSize, eraseSize);
});
}
//Set interval timer to repeatedly execute TransparencyCheck()
var timer = setInterval(TransparencyCheck, 5000);
//Check that all pixel alpha values = 0
function TransparencyCheck() {
var canvas2 = document.getElementById('canvas2');
var ctxT = canvas2.getContext('2d');
var imageDataTop = ctxT.getImageData(0, 0, canvas2.width, canvas2.height);
var counter = 0;
for (var i = 3; i < imageDataTop.data.length; i += 4) {
if (imageDataTop.data[i] == 0) {
counter++;
}
if (counter >= imageDataTop.data.length / 4) {
canvas2.style.opacity = "0";
clearTimeout(timer);
alert('all top canvas erased');
}
}
}
#stack {
position: relative;
}
#stack canvas {
position: absolute;
display: block;
left: 50%;
transform: translateX(-50%);
margin-top: 150px;
}
<img hidden src="https://sample-videos.com/img/Sample-jpg-image-50kb.jpg" alt="issue here" id="waterfall" />
<div id="stack">
<canvas id="canvas"></canvas>
<canvas id="canvas2" onmouseout="TransparencyCheck()"></canvas>
</div>
I am trying to cut certain pattern from file based canvas and i need multiple geometrical shapes used.
For that, i am drawing shapes on that canvas using globalCompositeOperation set to XOR.
$( document ).ready(function() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://cimsec.org/wp-content/uploads/2014/01/adriatic-sea-horizon-igor-voljc.jpg';
var width = img.naturalWidth/2; // this will be 300
var height = img.naturalHeight/2; // this will be 400
document.getElementById('canvas').width = width;
document.getElementById('canvas').height = height;
img.onload = function() {
ctx.drawImage(img, 0,0, width, height);
}
ctx.globalCompositeOperation = "xor";
function circle(x, y, radius)
{
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
var iks = width/2;
var sr = width/5;
var igrek = (sr);
circle(iks,igrek,sr);
var igrek2 = 3.5*sr;
circle(iks,igrek2,sr);
});
.lw { font-size: 60px; }
body {background-color:blue}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<canvas id="canvas"></canvas>
<!-- End your code here -->
</body>
</html>
Unfortunetly, it does not work correctly if i try cut more than one shape. On example on litewave only second shape is cut correctly, first one only has its perimeter cut.
Ultimately i plan to have ths shape cut from image, white area on this jpg example shoudl be transparent:
http://www.detroitbodyproducts.com/media/wysiwyg/hide.jpg
Is there any better way to do this?
You need to call ctx.beginPath(); first, or else it doesn't work:
$( document ).ready(function() {
var ctx = document.getElementById('canvas').getContext('2d');
var img = new Image();
img.src = 'http://cimsec.org/wp-content/uploads/2014/01/adriatic-sea-horizon-igor-voljc.jpg';
var width = img.naturalWidth/2; // this will be 300
var height = img.naturalHeight/2; // this will be 400
document.getElementById('canvas').width = width;
document.getElementById('canvas').height = height;
img.onload = function() {
ctx.drawImage(img, 0,0, width, height);
}
ctx.globalCompositeOperation = "xor";
function circle(x, y, radius)
{
ctx.beginPath();
ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
ctx.fill();
}
var iks = width/2;
var sr = width/5;
var igrek = (sr);
circle(iks,igrek,sr);
var igrek2 = 3.5*sr;
circle(iks,igrek2,sr);
});
.lw { font-size: 60px; }
body {background-color:blue}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<canvas id="canvas"></canvas>
<!-- End your code here -->
</body>
</html>
EDIT: solution some lines above.
I'm trying to have bouncing pictures with html5, canvas and some jQuery.
I've successfully made some balls bouncing, but I can't figure out how to draw pictures instead of simple 'particles'.
I've tried in different ways, but actually I think I'missing something.
I post the whole html so you can just copy/paste it easily.
Under my try there is a commented section with working bouncing balls.
Thank you so much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Explode Demo</title>
<link rel="stylesheet" href="styles.css" />
<meta name="viewport" content="width=320 initial-scale=1.0, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
canvas {
display: block;
background: whiteSmoke;
width: 100%;
height: 100%;
}
#presentation{
position: fixed;
background: rgba(0,0,0,0.7);
width: 100%;
height: 70px;
box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
color: white;
font-family:futura;
font-size: 30px;
padding-left: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="presentation">Bouncing Baaaaalls!</div>
<canvas id="output" ></canvas>
<script type="text/javascript">
(function() {
window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,40/60)
}}});
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
function Particle() {
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
this.radius = 20;
this.x = parseInt(Math.random() * W);
this.y = H;
this.color = 'rgb(' +
parseInt(Math.random() * 255) + ',' +
parseInt(Math.random() * 255) + ',' +
parseInt(Math.random() * 255) + ')';
if (this.x > W/2 ){
this.vx = Math.random() * (-15 - -5) + -5;
}else{
this.vx = Math.random() * (15 - 5) + 5;
}
this.vy = Math.random() * (-32 - -25) + -25;
this.draw = function() {
var img = new Image();
img.src = 'troll1.png';
ctx.beginPath();
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.closePath();
ctx.beginPath();
ctx.arc(this.x, this.y, 20, 0, 6.28, false);
ctx.clip();
ctx.stroke();
ctx.closePath();
ctx.drawImage(img, 0, 0);
// WORKING PARTICLES STARTS HERE
// ctx.fillStyle = this.color;
// ctx.beginPath();
// ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
// ctx.fill();
// ctx.closePath();
// WORKING PARTICLES ENDS HERE
};
}
var particle_count = 20;
var particles = [];
// Now lets quickly create our particle
// objects and store them in particles array
for (var i = 0; i < particle_count; i++) {
var particle = new Particle();
particles.push(particle);
}
function renderFrame() {
requestAnimationFrame(renderFrame);
// Clearing screen to prevent trails
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
ctx.clearRect(0, 0, W, H);
particles.forEach(function(particle) {
// The particles simply go upwards
// It MUST come down, so lets apply gravity
particle.vy += 1;
// Adding velocity to x and y axis
particle.x += particle.vx;
particle.y += particle.vy;
// We're almost done! All we need to do now
// is to reposition the particles as soon
// as they move off the canvas.
// We'll also need to re-set the velocities
if (
// off the right side
particle.x + particle.radius > W ||
// off the left side
particle.x - particle.radius < 0 ||
// off the bottom
particle.y + particle.radius > H
) {
// If any of the above conditions are met
// then we need to re-position the particles
// on the base :)
// If we do not re-set the velocities then
// the particles will stick to base :D
// Velocity X
particle.x = parseInt(Math.random() * W);
particle.y = H;
if (particle.x > W/2 ){
particle.vx = Math.random() * (-15 - -5) + -5;
}else{
particle.vx = Math.random() * (15 - 5) + 5;
}
particle.vy = Math.random() * (-32 - -28) + -28;
}
particle.draw();
});
}
$(document).ready(function(){
renderFrame();
});
</script>
</body>
</html>
EDIT WITH SOLUTION:
First, thanks to markE
I edited the code as he said, the problem was actually about timing (and understanding what I was doing). His answer really helped me a lot.
The image was not moving because I didn't told it to do that actually ( with ctx.drawImage(img, this.x, this.y)).
NOTE: For debugging canvas rendering with chrome take a look at HTML5 canvas inspector?
So here is the working (and ultra commented, thanks for the lesson markE) code for bouncing troll faces (put a troll1.png picture in the same folder):
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Canvas Explode Demo</title>
<!-- <link rel="stylesheet" href="styles.css" /> --> <meta name="viewport" content="width=320 initial-scale=1.0, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
canvas {
display: block;
background: whiteSmoke;
width: 100%;
height: 100%;
}
#presentation{
position: fixed;
background: rgba(0,0,0,0.7);
width: 100%;
height: 70px;
box-shadow: 7px 7px 13px rgba(0,0,0,0.3);
color: white;
font-family:futura;
font-size: 30px;
padding-left: 50px;
padding-top: 10px;
}
</style>
</head>
<body>
<div id="presentation">Bouncing Baaaaalls!</div>
<canvas id="output" ></canvas>
<script type="text/javascript">
(function() {
//define the animation refresh (frame rendering) with built-in browser timing
window.requestAnimationFrame=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||window.oRequestAnimationFrame||function(f){window.setTimeout(f,40/60)
}}});
//define some variables: canvas, context, img to put inside the context and an array of bouncing objects
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
//IMPORTANT: Wait for the picture to be loaded!
img.onload = function(){
alert('troll1 is LOADED.');
beginAnimation();
};
//yes, the src goes after
img.src = 'troll1.png';
//how many bouncing objects?
var particle_count = 4;
var particles = [];
var particle;
function Particle() {
//define properties of a bouncing object, such as where it start, how fast it goes
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
this.radius = 20;
this.x = parseInt(Math.random() * W);
this.y = H;
//Uncomment for coloured particles:
// this.color = 'rgb(' +
// parseInt(Math.random() * 255) + ',' +
// parseInt(Math.random() * 255) + ',' +
// parseInt(Math.random() * 255) + ')';
//end coloured particles
if (this.x > W/2 ){
this.vx = Math.random() * (-15 - -5) + -5;
}else{
this.vx = Math.random() * (15 - 5) + 5;
}
this.vy = Math.random() * (-32 - -25) + -25;
//we will call this function to actually draw the bouncing object at EVERY FRAME
this.draw = function() {
// Bouncing pictures were not bouncing because there were no this.x this.y . Shame on me.
ctx.drawImage(img,this.x,this.y);
// WORKING PARTICLES STARTS HERE
// ctx.fillStyle = this.color;
// ctx.beginPath();
// ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, false);
// ctx.fill();
// ctx.closePath();
//WORKING PARTICLES ENDS HERE
};
}
function renderFrame() {
//RENDER THE PARTICLEEEEEEES!
requestAnimationFrame(renderFrame);
// Clearing screen to prevent trails
var W = canvas.width = window.innerWidth;
var H = canvas.height = window.innerHeight;
ctx.clearRect(0, 0, W, H);
particles.forEach(function(particle) {
// The bouncing objects simply go upwards
// It MUST come down, so lets apply gravity
particle.vy += 1;
// Adding velocity to x and y axis
particle.x += particle.vx;
particle.y += particle.vy;
// We're almost done! All we need to do now
// is to reposition the bouncing objects as soon
// as they move off the canvas.
// We'll also need to re-set the velocities
if (
// off the right side
particle.x + particle.radius > W ||
// off the left side
particle.x - particle.radius < 0 ||
// off the bottom
particle.y + particle.radius > H
) {
// If any of the above conditions are met
// then we need to re-position the bouncing objects
// on the base :)
// If we do not re-set the velocities then
// the bouncing objects will stick to base :D
// Velocity X
particle.x = parseInt(Math.random() * W);
particle.y = H;
if (particle.x > W/2 ){
particle.vx = Math.random() * (-15 - -5) + -5;
}else{
particle.vx = Math.random() * (15 - 5) + 5;
}
particle.vy = Math.random() * (-32 - -28) + -28;
}
particle.draw();
});
}
function beginAnimation(){
//create the particles and start to render them
for (var i = 0; i < particle_count; i++) {
particle = new Particle();
particles.push(particle);
}
//BOUNCE MOFOS!
renderFrame();
}
</script>
You're not waiting for troll1.png to load before trying to draw it.
Var img=new Image();
img.onload=function(){
beginMyAnimation();
}
img.src=”troll1”;
alert(“troll1 is not loaded yet.”);
function beginAnimation(){
….
ctx.drawImage(img,0,0);
….
}
The order of execution is like this:
First var img=new Image().
Javascript creates a new image object and puts a reference in img.
Second img.onload….
Javascript doesn’t execute this code yet. It just takes note that onload must be executed after troll1.jpg has successfully been loaded into the new image object.
Third img.src=”something.jpg”.
Javascript immediately begins loading troll1.jpg.
Since loading will take a while, Javascript also continues executing any code that follows.
Fourth alert(“Image is not loaded yet.”);
Javascript displays this alert message. Note that troll1.jpg has not been loaded yet. Therefore, any code that tried to use the image now would fail—no image yet!
Fifth img.onload.
Javascript has finally fully loaded troll1.jpg so it executes the onload function.
Sixth beginMyAnimation()
Javascript will finally execute beginAnimation(). At this point any code that tries to use the image will succeed. You can do ctx.drawImage(img,0,0) will succeed now.
So rearrange all your setup code inside in beginAnimation(). Finally, put renderFrame() last in beginAnimation().
I'm trying to place a background image on the back of this canvas script I found. I know it's something to do with the context.fillstyle but not sure how to go about it. I'd like that line to read something like this:
context.fillStyle = "url('http://www.samskirrow.com/background.png')";
Here is my current code:
var waveform = (function() {
var req = new XMLHttpRequest();
req.open("GET", "js/jquery-1.6.4.min.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundmanager2.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/soundcloudplayer.js", false);
req.send();
eval(req.responseText);
req.open("GET", "js/raf.js", false);
req.send();
eval(req.responseText);
// soundcloud player setup
soundManager.usePolicyFile = true;
soundManager.url = 'http://www.samskirrow.com/client-kyra/js/';
soundManager.flashVersion = 9;
soundManager.useFlashBlock = false;
soundManager.debugFlash = false;
soundManager.debugMode = false;
soundManager.useHighPerformance = true;
soundManager.wmode = 'transparent';
soundManager.useFastPolling = true;
soundManager.usePeakData = true;
soundManager.useWaveformData = true;
soundManager.useEqData = true;
var clientID = "345ae40b30261fe4d9e6719f6e838dac";
var playlistUrl = "https://soundcloud.com/kyraofficial/sets/kyra-ft-cashtastic-good-love";
var waveLeft = [];
var waveRight = [];
// canvas animation setup
var canvas;
var context;
function init(c) {
canvas = document.getElementById(c);
context = canvas.getContext("2d");
soundManager.onready(function() {
initSound(clientID, playlistUrl);
});
aniloop();
}
function aniloop() {
requestAnimFrame(aniloop);
drawWave();
}
function drawWave() {
var step = 10;
var scale = 60;
// clear
context.fillStyle = "#ff19a7";
context.fillRect(0, 0, canvas.width, canvas.height);
// left wave
context.beginPath();
for ( var i = 0; i < 256; i++) {
var l = (i/(256-step)) * 1000;
var t = (scale + waveLeft[i] * -scale);
if (i == 0) {
context.moveTo(l,t);
} else {
context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.
}
}
context.stroke();
// right wave
context.beginPath();
context.moveTo(0, 256);
for ( var i = 0; i < 256; i++) {
context.lineTo(4 * i, 255 + waveRight[i] * 128.);
}
context.lineWidth = 0.5;
context.strokeStyle = "#000";
context.stroke();
}
function updateWave(sound) {
waveLeft = sound.waveformData.left;
}
return {
init : init
};
})();
Revised code - currently just showing black as the background, not an image:
// canvas animation setup
var backgroundImage = new Image();
backgroundImage.src = 'http://www.samskirrow.com/images/main-bg.jpg';
var canvas;
var context;
function init(c) {
canvas = document.getElementById(c);
context = canvas.getContext("2d");
soundManager.onready(function() {
initSound(clientID, playlistUrl);
});
aniloop();
}
function aniloop() {
requestAnimFrame(aniloop);
drawWave();
}
function drawWave() {
var step = 10;
var scale = 60;
// clear
context.drawImage(backgroundImage, 0, 0);
context.fillRect(0, 0, canvas.width, canvas.height);
// left wave
context.beginPath();
for ( var i = 0; i < 256; i++) {
var l = (i/(256-step)) * 1000;
var t = (scale + waveLeft[i] * -scale);
if (i == 0) {
context.moveTo(l,t);
} else {
context.lineTo(l,t); //change '128' to vary height of wave, change '256' to move wave up or down.
}
}
context.stroke();
// right wave
context.beginPath();
context.moveTo(0, 256);
for ( var i = 0; i < 256; i++) {
context.lineTo(4 * i, 255 + waveRight[i] * 128.);
}
context.lineWidth = 0.5;
context.strokeStyle = "#ff19a7";
context.stroke();
}
function updateWave(sound) {
waveLeft = sound.waveformData.left;
}
return {
init : init
};
})();
Theres a few ways you can do this. You can either add a background to the canvas you are currently working on, which if the canvas isn't going to be redrawn every loop is fine. Otherwise you can make a second canvas underneath your main canvas and draw the background to it. The final way is to just use a standard <img> element placed under the canvas. To draw a background onto the canvas element you can do something like the following:
Live Demo
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
canvas.width = 903;
canvas.height = 657;
var background = new Image();
background.src = "http://www.samskirrow.com/background.png";
// Make sure the image is loaded first otherwise nothing will draw.
background.onload = function(){
ctx.drawImage(background,0,0);
}
// Draw whatever else over top of it on the canvas.
Why don't you style it out:
<canvas id="canvas" width="800" height="600" style="background: url('./images/image.jpg')">
Your browser does not support the canvas element.
</canvas>
Make sure that in case your image is not in the dom, and you get it from local directory or server, you should wait for the image to load and just after that to draw it on the canvas.
something like that:
function drawBgImg() {
let bgImg = new Image();
bgImg.src = '/images/1.jpg';
bgImg.onload = () => {
gCtx.drawImage(bgImg, 0, 0, gElCanvas.width, gElCanvas.height);
}
}
Canvas does not using .png file as background image. changing to other file extensions like gif or jpg works fine.
On a button click I call a script to get the canvas Image. I take the location. I need to pass this image source into another jsp file where I need to display this image.
Can you please help me out in this.
<%# page contentType="text/html;charset=UTF-8" %>
<html>
<head>
<script>
function draw() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "black";
ctx.beginPath();
var x;
var y;
canvas.onmousedown = function(e) {
x = e.clientX;
y = e.clientY;
ctx.moveTo(x, y);
}
canvas.onmouseup = function(e) {
x = null;
y = null;
}
canvas.onmousemove = function(e) {
if (x == null || y == null) {
return;
}
x = e.clientX;
y = e.clientY;
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
ctx.lineTo(x, y);
ctx.stroke();
ctx.moveTo(x, y);
}
};
function to_image(){
var canvas = document.getElementById("canvas");
document.getElementById("theimage").src = canvas.toDataURL();
}
function clear_image(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.fillStyle = '#ffffff';
context.clearRect(0, 0, canvas.width, canvas.height);
canvas.width = canvas.width;
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="300" height="300"
style="border: 1px solid black;"></canvas>
<div><button onclick="to_image()">Draw to Image</button></div>
<div><button onclick="clear_image()">Clear</button></div>
<image id="theimage"></image>
</body>
</html>
I need to pass the value of document.getElementById("theimage").src into another jsp and access that value to dispaly the image.
Can anybody help me out in this.
If you meant you will load that second page with image on a button click from the first page(for which you have pasted code)then just update the code as:
{
var canvas = document.getElementById("canvas");
var dataUrl = canvas.toDataURL();
//-- Following code can be placed wherever you want to call another page.
window.location = "urlToSecondJSPPage.jsp?imgUrl="+dataUrl;
}
And then imgUrl(url parameter) can be accessed from second page.