|
JavaScript - Canvas Image Resizing Problem
Hello all;
I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. Similar TutorialsSo I'm creating a game and decided to use a canvas for the map. The map is a big pictures 500kb+ (6400x6400px) and the canvas size is 320x320 so I am displaying only part of the image at a time and have the page reload on button click for database purposes. What I'd like help with is performance. Currently it's taking a few secs to reload every time and it seems that it causes some cpu strain (can't switch tabs while loading). Could I stop the canvas from reloading the image each time the page is reloaded and if so then how? Can I make the canvas only load a part of the image, if so then how? If neither is possible any tips, solutions how to solve the performance issues? i want to transfrom image like the picture below using canvas,it seems simple but i find no way to do , can anyone give me some ideas? ( left side is the source) I found a great little starfield script made with javascript and canvas3d. however i can't for the life of me figure out how to implement a background image inside the canvas. is there some command that tells it to use some feature of canvas, that if otherwise not called, won't allow normal graphics? his whole starfield is generated with a search engine form , and appears to just use a text period to represent stars. here's a link to his script: http://seb.ly/demos/canvas3d/canvas3d2.html how do i get a background image in that? or is it impossible? i tried putting it in the body tag, but it just flashed the background image on the screen for a half a second and then went back to showing only the black background. i tried removing the background body color and replacing it with only background-image ccs, same problem. i tried div positioning it, but the div just covered up the starfield. I am very new to javascript(and these forums) and I am teaching my self to use the canvas element. I am trying to draw an image to the canvas but nothing is appearing. And I am getting no error in the chrome console. Can anyone see why? Code:
function RPGanimation(options)
{
this.initcanvas(options);
this.initbackground(options);
};
RPGanimation.prototype = {
initbackground: function(options){
this.background = new Image();
this.background.src = options.backsource;
this.background.onload = this.drawbackground();
},
initcanvas:function(options){
this.canvas = document.getElementById(options.canvasid);
this.context = this.canvas.getContext('2d');
this.dimensions = {width:this.canvas.width,height:this.canvas.height};
},
drawbackground:function(){
//document.write('<IMG SRC="Chrysanthemum.jpg">');
this.context.drawImage(this.background,0,0,this.dimensions.width,this.dimensions.height);
}
};
I create the object in a webpage with the canvas element created just before that script tag... Hello guys! I need your help! I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is: <html> <head> <title></title> </head> <body> <canvas id='chart' width='400' height='200'> <script type="text/javascript"> var canvas = document.getElementById('chart'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 10; ctx.strokeRect(0, 0, 400, 200); ctx.moveTo(0, 100); ctx.lineTo(400, 100); ctx.stroke(); </script> </body> </html> 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 Okay, so I have a canvas, and I want the user to be able to copy an image url and paste it into an input box, that will then set it as the canvas background image. Does anyone know how I can do this? I was thinking about using the OnChange method in the text input, but I cannot find any help with that online. My current Canvas Background is (In <head><script>) Code: var imgObg = new Image(); imageObj.src = "images/bg.png"; And my text input is Code: <form name="input" action="" method="get"> <input type="text" id="textboxBG" onchange="??" /> <input type="submit" value="Submit" /> </form> If you need more code, or would like to help me out more in depth, I would gladly paypal you a little money. I know this can't be too difficult! I REALLY want this done! I'm trying to simulate a textfield on a canvas; that is when clicking on the text box a cursor appears and blink. My problem here is when I create more than one object, the event listener will work only on the last object created. Here is my code: Javascript Code: var canvas;
var ctx;
var MousePosX;
var MousePosY;
var Cursor_Width = 1;
var Cursor_Height = 21;
var Height = 27;
var LapseTime = 800;
function init(CanvasName) {
canvas = document.getElementById(CanvasName);
ctx = canvas.getContext("2d");
}
/*
Create Textfiled
*/
function Textfield(x, y, w) {
Textfield.prototype.x = x;
Textfield.prototype.y = y;
Textfield.prototype.w = w;
Textfield.prototype.Cursor_PosX = x + 3;
Textfield.prototype.Cursor_PosY = y + 3;
// draw rectangle
ctx.beginPath();
ctx.rect(this.x, this.y, this.w, Height);
ctx.closePath();
ctx.stroke();
// listen for mouse click event
canvas.addEventListener("mousedown", function(evt) {
// calculate mouse coordination on canvas
MousePosX = evt.clientX - canvas.offsetLeft;
MousePosY = evt.clientY - canvas.offsetTop;
// if mouse coordination is within texfield display cursor
if((MousePosX > Textfield.prototype.x && MousePosX < (Textfield.prototype.x + Textfield.prototype.w)) && (MousePosY > Textfield.prototype.y && MousePosY < (Textfield.prototype.y + Height))) {
Textfield.prototype.cursor();
}
});
}
/*
Cursor for textfield
*/
Textfield.prototype.cursor = function() {
// alert("good");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.rect(this.Cursor_PosX, this.Cursor_PosY, Cursor_Width, Cursor_Height);
ctx.closePath();
ctx.stroke();
setTimeout("Textfield.prototype.animate_cursor()", LapseTime);
};
/*
Change color of cursor to white to make blinking effect
*/
Textfield.prototype.animate_cursor = function() {
ctx.strokeStyle = "white";
ctx.stroke();
setTimeout("Textfield.prototype.cursor()", LapseTime);
};
HTML Code: <!DOCTYPE HTML>
<html>
<head>
<style>
#MyCanvas {
border: 1px solid #000000;
}
</style>
<script src="widgets1.js"></script>
<script>
window.onload = function () {
init('MyCanvas');
var tf1 = new Textfield(10.5, 10.5, 150);
var tf2 = new Textfield(10.5, 50.5, 150);
};
</script>
</head>
<body>
<br /><br /><br />
<center>
<canvas id="MyCanvas" width="700" height="500">
</canvas>
</center>
</body>
</html>
What i want to achieve here is have my event listener on any textfield created on the canvas. I created a drawEllipse function for a Canvas library I'm making, and it works fine in Safari, Firefox, and Chrome, but in Opera, the rotation doesn't work. The function is as follows: Code: ctx.drawEllipse = function (fill, x, y, rad1, rad2, r) {
ctx.save();
if (r) {
ctx.translate(x, y);
ctx.rotate(r);
ctx.translate(-x, -y);
}
ctx.scale(rad1, rad2);
ctx.beginPath();
ctx.arc()(x / rad1, y / rad2, 1);
ctx[fill]();
ctx.restore();
};
When I add rotation to the ellipse, in Opera, it doesn't rotate and just gets bigger. I have no idea why. Can anyone suggest anything? Thanks, Julian I'm coding my new website, and to save bandwidth, i'm letting users link to their own avatars, so I want to resize any images over 150px wide so it doesn't mess up my layout - simple, right? Well, you'd think so, but I don't know any javascript, so i've scrapped this together with what little I know: Code: var obj=document.getElementsByTagName("img");
for(var i=0;i<obj.length;i++){
if(obj[i].className == "avatar") {
if(getElementWidth(obj[i]) > 150) {
obj[i].style.width = 150;
}
}
}
Can anyone help me fix that or code me a new one please? I need it to check all elements (well, images - but only images will be using it) for a width of over 150px, and, if it is - change it to 150px I know it's pretty simple but it's hurting my head! :P Thanks in advance -Alux Im using the below javascript to resize images on a forum I have created but I want it to ignore 2 certain images that are part of my header. Heres the code Code: <script>
window.onload = resizeimg;
function resizeimg()
{
if (document.getElementsByTagName)
{
for (i=0; i<document.getElementsByTagName('img').length; i++)
{
im = document.getElementsByTagName('img')[i];
if (im.width > 600)
{
im.style.width = '600px';
eval("pop" + String(i) + " = new Function(\"pop = window.open('" + im.src + "','phpbbegypt ','fullscale','width=400,height=400,scrollbars=1,resizable=1'); pop.focus();\")");
eval("im.onclick = pop" + String(i) + ";");
if (document.all) im.style.cursor = 'hand';
if (!document.all) im.style.cursor = 'pointer';
im.title = 'Click Here To See Image Full Size ';
}
}
}
}
</script>
But I want it to ignore 2 images..and not resize them. head1.jpg head2.jpg Any help would be gratefully recieved !! Cheers !! Hi there, I just recently took over a site that has some java code on it I'm unfamiliar with. If you go to smalltowngossipmusic.com, you'll see what this code does. Go to the pages "Sounds" or "Travel", and once your mouse leaves the main image at the top of the page, you should see those pages shrink. This is some code that was implemented on the site (which is wordpress) in the header.php template. Here is the code: Code: <script type="text/javascript">
/* <![CDATA[ */
var $ = jQuery.noConflict();
$(document).ready(function () {
headerImage();
});
var speed = 500;
var origMT = 0, origHeight = '120px';
function expandHeader(obj) {
$('.headerImage').animate({height: '436px'},speed);
$('.headerImage img').animate({'margin-top': '-2px'},speed);
}
function shrinkHeader(obj) {
$('.headerImage').stop().animate({'height': origHeight},speed);
$('.headerImage img').stop().animate({'margin-top': origMT},speed);
}
function headerImage() {
origMT = $('.headerImage img').css('margin-top');
origHeight = $('.headerImage').css('height');
$('.headerImage img').css('margin-top','0');
$('.headerImage').css('height','436px');
setTimeout(shrinkHeader,speed*2);
$('.headerImage').hover(expandHeader, shrinkHeader);
}
/* ]]> */
</script>
If you look at the page source for each page, you'll see that there is nothing out of whack (at least, not that I can find). However, for some reason, this shrinking script only works on the two pages I mentioned - on every other page, it either doesn't work at all, or it only works about half-way. I have made sure the page.php and header.php templates both have accurate picture information in them, and can not find anything wrong anywhere. Is there any advice anyone here can give me on how to fix this? I've been doing html and css for awhile, but am relatively new to javascript and php, so am a bit out of my element on this. I'm willing to post any more code, snippets, whatever needed, just let me know what you need if you think you can help. Thanks, Brandon I am trying to dynamically resize an image. Here is my code: Code: <img border="0" src="images/right.gif" width="16" height="100" name="right">
<SCRIPT Language=Javascript>
<!--
function ChangeImgSize(){
right.height = 3000;
}
ChangeImgSize()
//-->
</SCRIPT>
This is on an asp page, and the <script> tag is the last thing on the page before </body> The image does not get resized. I've been testing the page on current browsers (IE 8, Firefox, Chrome). I'm certain I'm doing something newbish, I don't really know Javascript all that well. Thanks in advance, Skip Hi CodingForum! For my website, I have a working script that changes the background image of my website every time it is reloaded. However, I would also like the image to dynamically resize as the user resizes the browser window. here is a code snippet: Code: <head>
<script type="text/JavaScript">
/*<![CDATA[*/var el="bgImg";var bgimg=new Array("../00home/06home.jpg","../00home/07home.jpg");var random=Math.round((bgimg.length-1)*Math.random());var cssStr="#"+el+" { background: url("+bgimg[random]+") no-repeat center } ";var style=document.createElement("style");style.setAttribute("type","text/css");if(style.styleSheet){style.styleSheet.cssText=cssStr;}else{var cssText=document.createTextNode(cssStr);style.appendChild(cssText);}document.getElementsByTagName("head")[0].appendChild(style);/*]]>*/
</script>
<style type="text/css">
.rotatebg {
z-index:0;
position:fixed;
top:0; left:0;
width:1378px; height:1178px;
background-repeat: no-repeat;
background-position:inherit;
overflow:hidden;
}
</style>
</head
<body>
<div class="rotatebg" id="bgImg" style="width:100%; height:100%" ></div>
</body>
Does anyone know how I can augment/alter this coded setup to enable the randomly loaded background image to proportionately fill the browser window? Hey all- trying to get this bit of js to work properly. I'm close, but the issue is that if the window is opened at a size that is SMALLER than the original image, it wont scale down to the smaller size until i first make the window bigger, THEN size it down smaller. The image itself is big (its fashion photography so it needs to be high res) and the js sets the minimum width at 1070. Id like to have the image as big as possible and then on page load automatically drop down to as low as 1070px if the window size is small. Here is the js: Code: jQuery.noConflict();
function screenSize() {
var w, h;
w = (
window.innerWidth ?
window.innerWidth :
(
document.documentElement.clientWidth ?
document.documentElement.clientWidth :
document.body.offsetWidth));
h = (
window.innerHeight ?
window.innerHeight :
(
document.documentElement.clientHeight ?
document.documentElement.clientHeight :
document.body.offsetHeight));
return {w:w, h:h};
}
jQuery(document).ready(function ()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
})
jQuery(window).resize(function()
{
if( screenSize().w > 1070 )
{
document.getElementById('home-page-bg-image').style.width = screenSize().w + 'px';
}
});
let me know if you have any ideas I am making my first mobile website and need to put wallpapers in it. I cant make every picture in all resolution for each mobile. I found this website which can auto- resize image when user select their mobile brand...i have tried to learn it from page source but failed. Can any one help me please, m newbie xD here is the website: http://cartoonized.net/cellphone-wallpaper.ph 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 |
|||||||