JavaScript - Background Image In Canvas

Hi everyone,

I am trying to make an image mask using javascript. The basic idea is that the image on the canvas will appear as a black box. When the user hovers over the image a small part of it is revealed.

I have attached a picture as an example because its quite hard to explain!

Any help would be appreciated!

Thanks, Luke

Hello,
I've just finished my website. But my random background images load properly sometimes, and sometimes they load as a half.
Here is my website:
http://www.finnhaverkamp.com/

Here is the relevant HTML:
Code:

<!--open random background script-->
<script  type="text/javascript">

var randnum = Math.random();
var inum = 7;
var rand1 = Math.round(randnum * (inum-1)) + 1;
var images = new Array;
images[1] = "background1.jpg";
images[2] = "background2.jpg";
images[3] = "background3.jpg";
images[4] = "background4.jpg";
images[5] = "background5.jpg";
images[6] = "background6.jpg";
images[7] = "background7.jpg";
var image = images[rand1];


function chBackgr()
{
    document.body.style.backgroundImage = 'url(' + image + ')';
}

onload = chBackgr;
<!--close random background script-->

It's weird. Because my background image is certainly random. It's just that sometimes only half of the image loads. Really strange. Any help is appreciated. Thank You.

Hello,

I have recently been working on a website which will have rotating background images. I have found a useful javascript code (i don't know who the author is) which rotates different background images neatly after x milliseconds. here is the code:


====
<script language="JavaScript1.2">
var bgimages=new Array()
bgimages[0]="../gfx/bgs/bg1.jpg"
bgimages[1]="../gfx/bgs/bg2.jpg"

//preload images
var pathToImg=new Array()
for (i=0;i<bgimages.length;i++){
pathToImg[i]=new Image()
pathToImg[i].src=bgimages[i]
}

var inc=-1

function bgSlide(){
if (inc<bgimages.length-1)
inc++
else
inc=0
document.body.background=pathToImg[inc].src
}

if (document.all||document.getElementById)
window.onload=new Function('setInterval("bgSlide()",6000)')

</script>
====


The script works, and the background images rotate. However, currently the rotation of the images have no effect. I would like to add the effect of the images blending into each other when they rotate.

How would this be possible?


Thanks a bunch!

-Captainel

I have a 16x16 solid color yellow image - .gif type. I'm using it as a background for a div. I'd like to make it transparent but can't figure out how to do. I have Paint.net and follow its instructions to make the image 50% transparent but afterwards, it's completely clear with no hint of yellow.

How can I make a transparent solid image? I'd like it about 50% transparent.

Thanks...

PHP Code:
.xstooltip
{
    visibility: hidden; 
    position: absolute; 
    top: 0;  
    left: 0; 
    z-index: 2; 

    font: normal 8pt sans-serif; 
    padding: 3px; 
    border: solid 1px;
    /*background-color: #DBDBDB;*/
    /*background-color: #FFFF77;*/

    background-repeat:repeat;
    background-image:url(/yellow_help.gif); 
} 

How am I able to have a gallery of images fading in and out as the background of a DIV? It's currently just a static background using CSS.

You can view the HTML page in question he

http://aksdesigns.co.uk/temp/template.html

The DIV container is the one with the ID of #MainContent

Code:

#MainContent {
	width: 980px;
	height: 550px;
	margin: 0 auto;
	padding: 0px;
	background-image: url(images/Content-bg-1.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	border-left: 2px solid #153365;
	border-right: 1px solid #FFF;
}

It probably couldn't be done using CSS be how could I achieve this with Javascript?

Hi all,

I was wondering if anyone knew were I can get a javascript that will adjust the background image dependant on the users screen resolution like whats used on this site http://gregorywood.co.uk/journal/chilli-babies

Thanks in advance!!
Kyle

Im going nuts with this, first im starting of by just putting a background image in the tb using JavaScript, but it won't work!

Heres what i got

in my 'name.js' file i got

var name=new Array()
name='name.jpg'

and in my HTML i got

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<div>
<table>
<script type="text/javascript" language="JavaScript" src="name.js">
document.write('<td id="name2" background="' + name + '">');
</script>
</td>
</table>
</div>
</body>
</html>

Where have a gone wrong??

If I type Hello World into the name.js file and put it in a tb it works fine, im confused

thanks,
Paul

I am trying to recreate this functionality on my website where you can drag a background image around and when you get ot the edges of the image it bounces back to the edge of that corrosponding side. have a look at the site in question - http://irrland.sonntagskunst.de/#

so far i have recreated the top left and right edges using
Code:

var window_width = $(window).width();
    var window_height = $(document).height();
    var image_height = $("#background").height(); (2914px)
    var image_width = $("#background").width(); (3920px)


    $("#background").draggable({
        scroll: false,
        stop: function (event, ui) {
            var animate_to = {};
            var window_width_resized = $(window).width();

            if (ui.position.left > 0) {
                animate_to.left = '0px';
            }
            if (ui.position.top > 0) {
                animate_to.top = '0px';
            }

            //initial size for width
            var image_width_gap = window_width - (image_width + ui.position.left);
            if (image_width_gap > 0) {
                animate_to.left = (0 - (image_width - window_width)) + 'px';
            }

            //after window gets resized for width
            var image_width_gap_resized = window_width_resized - (image_width + ui.position.left);
            if (image_width_gap_resized > 0) {
                animate_to.left = (0 - (image_width - window_width_resized)) + 'px';
            }


$("#background").animate(animate_to, { duration: 1000, easing: "easeOutElastic" });

then i am using the same logic to do the bottom edge but it doesnt work any ideas

here is how i thought the bottom would work

Code:

//initial size for height
            var image_height_gap = window_height - (image_height + ui.position.top);
            if (image_height_gap > 0) {
//                animate_to.top = (0 - (image_height - window_height)) + 'px';
            }

help would be greatly appreciated

fixed.. my bg image was infact smaller

I want to use an image as a CSS background-image so I used the Image constructor to load the image:
Code:

(new Image()).src="http://www.mediafire.com/imgbnc.php/432b35f2cc3340ea03d25128ada294476c92189353679dfb7e9cc9dfde6498f06g.jpg";

but I noticed that the browser (Firefox) load the image from the URL and not from the memory when changing the background-image property (it takes about 1.5 seconds before showing the image, and every time I reload the page!)

After you click on the last button 3 times it should change the background to the zombies image however it isn't working. I haven't found tutorials for doing it exactly as I am attempting it but I don't see why this isn't working. It runs through the code just fine and the button works as intended except for the fact that the background image isn't changing. I am still pretty new to JavaScript however so I feel I may just being calling the image incorrectly.


Code:

<html>
<title>Welcome :D</title>
<head>

    <style type="text/css">
	body {
		background-color:E6E6E6;	
	}
    </style>
	<script type="text/javascript">
	//Pre loading images to be used with check boxes.
	function preLoad(){
	Eyeball= new Image(400,200)
	Eyeball.src = "Eyeball.jpg"

	Smileys = new Image(400,200)
	Smileys.src = "Smileys.gif"

	goodAfternoon = new Image(400,200)
	goodAfternoon.src = "Good Afternoon.gif"
	
	goodAfternoonFinal = new Image(400,200)
	goodAfternoonFinal.src = "Good Afternoon.gif"
	
	zombies=new Image()
	zombies.src = "Zombies.jpg"
	
	}
	
	function validate(){
		if(document.getElementById("cb1").checked){
		document.goodAfternoon.src=Eyeball.src;
		}else{
		document.goodAfternoon.src=Smileys.src;
		}
	}
	function reset(){
		cb1.checked=false;
		document.goodAfternoon.src=goodAfternoonFinal.src; 
	}
	
	var i=0;
	function myalert(){
		i++
		if(i == 1){
		alert("I dare you to press me again....");
		}
		if(i == 2){
		
		}
		if(i == 3){
		i = 0;
		document.body.background = "zombies.src";
		}
	}
	
</script>
</head>
<body onLoad="javascript:preLoad()">	

This is where I learn a lot of my coding for Java, JavaScript, and HTML
	<a href="http://www.thenewboston.com/"><img src="theNewBoston.gif"></a>
	
</br>

 "Check" me out;) <input type="checkbox" id="cb1" onClick="validate()" />
 <img src="Good Afternoon.gif" name="goodAfternoon">
 <input type="button" id="cb2" value="RESET" onClick="reset()"/>

	
	</BR></br></br></br></br>
    Hello, thank you for visiting my webpage I hope you like it.

  <input type="button" onClick="myalert()"value="CLICK me"/>
</body>
</html>

I have 3 background images, and 1 is picked at random to be the background image of the body when loading the page.My code is below. Right now it's just white, can't get any pictures to load. I have checked the URLs and they are correct. Can someone help out?

Here is my code in the header:
Code:

<script type="text/javascript">
function getBackground(){
            
                var bgimg = new Array();
                bgimg[0] = "background1";
                bgimg[1] = "background2";
                bgimg[2] = "background3";
                
                var random = Math.floor(Math.random() * bgimg.length);
                var imgurl = bgimg[random];
                document.body.style.backgroundImage = 'url(' + imgurl + ')';
            }
        </script>

body:
Code:

<body onload="getBackground()">

Hey, everyone! I found this script that works great for what it's for. However, I would like to use it for background images. Can someone tell me how to adjust this script so it can be used for backgrounds? Thanks in advance!

Web Page Code Code:

<html>

<head>

<title>slayeroffice | code | image cross fade redux</title>

<link rel="stylesheet" type="text/css" href="xfade2_o.css">

<script type="text/javascript" src="xfade2.js"></script>

</head>

</div>
<body background="id=imageContainer">

<div id="imageContainer">

<img src="http://slayeroffice.com/code/imageCrossFade/img1.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img2.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img3.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img4.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img5.jpg">
<img src="http://slayeroffice.com/code/imageCrossFade/img6.jpg">

</div>

</body>
</html>

Style Sheet 1 Code:

#imageContainer {
	height:309px;
}

#imageContainer img {
	display:none;
	position:absolute;
	top:0; left:0;
}

Style Sheet 2 Code:

#imageContainer {
	position:relative;
	margin:auto;
	width:500px;
	border:1px solid #000;
}

JavaScript Code:

window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);

var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;

function so_init() {
	if(!d.getElementById || !d.createElement)return;

	css = d.createElement("link");
	css.setAttribute("href","xfade2.css");
	css.setAttribute("rel","stylesheet");
	css.setAttribute("type","text/css");
	d.getElementsByTagName("head")[0].appendChild(css);

	imgs = d.getElementById("imageContainer").getElementsByTagName("img");
	for(i=1;i<imgs.length;i++) imgs[i].xOpacity = 0;
	imgs[0].style.display = "block";
	imgs[0].xOpacity = .99;
	
	setTimeout(so_xfade,1000);
}

function so_xfade() {
	cOpacity = imgs[current].xOpacity;
	nIndex = imgs[current+1]?current+1:0;

	nOpacity = imgs[nIndex].xOpacity;
	
	cOpacity-=.05; 
	nOpacity+=.05;
	
	imgs[nIndex].style.display = "block";
	imgs[current].xOpacity = cOpacity;
	imgs[nIndex].xOpacity = nOpacity;
	
	setOpacity(imgs[current]); 
	setOpacity(imgs[nIndex]);
	
	if(cOpacity<=0) {
		imgs[current].style.display = "none";
		current = nIndex;
		setTimeout(so_xfade,1000);
	} else {
		setTimeout(so_xfade,50);
	}
	
	function setOpacity(obj) {
		if(obj.xOpacity>.99) {
			obj.xOpacity = .99;
			return;
		}
		obj.style.opacity = obj.xOpacity;
		obj.style.MozOpacity = obj.xOpacity;
		obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
	}
	
}

Hi Guys,

I would like to be able to change my webpage background image according to the screen resolution the user uses so:

if screen resolution is greater than or equals to 1200*600 then background = mybackground.jpg no-repeat

else

background = #000000

THANKS A MILLION!

Hi there!

How should I write this - better than it's now - so that when I rotate a figure, in the next "frame" it would stay rotated? Second thing - if you run this code, and set the angle for, let's say 180 degrees the figure is being drawn in some random location. How do I fix this? Code:

Code:

function GenericFigure(context) {
	this.states = ["wait", "moving", "rotating", "stop"];
	this.state = this.states[0];
	this.ctx = context;
	this.sqrW = this.sqrH = 20;
	this.ctxW = 200;
	this.ctxH = 350;
	
	this.colorsO = {
		red : "#ee1515",
		green : "#45d137",
		blue : "#17a3f3",
		orange : "#ff910f",
		purple : "#680077"
	};
	
	this.colorsA = ["#ee1515", "#45d137", "#17a3f3", "#ff910f", "#680077"];
	
	this.pickColor = function() {
		var num = Math.floor(Math.random() * 5);
		return this.colorsA[num];
	}
}

function Rectangle(context) {
	this.inheritFrom = GenericFigure;
	this.inheritFrom(context);
	this.width = this.sqrW;
	this.height = this.sqrH * 3;	
	this.x = this.ctxW / 2;
	this.y = 0;
	this.rotation = -1;
	
	this.setRotation = function(angle) {
		this.rotation = angle;
	}
	
	this.rotate = function() {
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.translate(this.x + 2 * this.width, this.y - 2 * this.height + 20);
		this.ctx.rotate(this.rotation * Math.PI / 180);
		this.ctx.fillRect(this.ctxW / 2, 0, this.width, this.height);
		this.ctx.restore();
	}
	
	this.moveDown = function() {
		this.y += 20;
		this.ctx.restore();
		this.ctx.clearRect(0, 0, this.ctxW, this.ctxH);
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
		this.ctx.save();
		
		if(this.rotation > -1) {
			this.rotate();
		}
		l("A");
	}
		
	this.draw = function() {
		this.ctx.fillStyle = this.pickColor();
		this.ctx.save();
		this.ctx.fillRect(this.x, this.y, this.width, this.height);
	}
}

//a tak można wywołać:

var ctx = document.getElementById("game").getContext("2d");
var rect = new Rectangle(ctx);				
      rect.draw();
				
      var inte = setInterval(function(){if(rect.y >= rect.ctxH - rect.height){clearInterval(inte);return;}if(rect.y == 60) rect.setRotation(90);rect.moveDown();}, 500);

And the third problem:

Code:

this.ctx.translate(this.x, 0);

I thought, that this line should set orientation point to top left corner of my figure, but it seems, that it doesn't - after rotation my figure is being drawn two heights lower. Again - how do I fix it?

Any help will be much appreciated .

I've been reading a lot of tutorials on the canvas tag and seen a lot of people using JavaScript that looks something like:

ctx.beginPath();
ctx.moveTo(25,25);
ctx.lineTo(105,25);
ctx.fill();

I understand that ctx is just the variable name and I can replace that with any variable I define, however, I'm looking for a list of all of the methods such as (moveTo, lineTo, fill etc...), as well as what they do.


I hope I'm explaining this or asking this correctly.

Thanks!

-Mike