I made canvas like this ,
<canvas id="mainCanvas" style="width:310px;height:212px;">
</canvas>
then try to put png on the canvas in my script
var canvas=document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var img= new Image();
img.src = "img/player.png";
context.drawImage(img,0,0,310,212);
my plyer.png size is 312 *212 , the same size as canvas size.
However,my png file is expansioned on the canvas. Consequently, right edge and bottom edge protrude from the canvas.
Why my png doesn't fit in ??
All canvas should have width and height attributes specified
<canvas width="310" height="212"></canvas>
Width and height shouldn't use 'px'.
With javascript use:
var c = document.querySelector('canvas');
c.width=310;
c.height=212;// as Ken Fyrstenberg mentioned
Also be sure to wait till image will load.
img.onload(function(){
//drawimage
});
You need to apply the size as an attribute not styles. Try this:
<canvas id="mainCanvas" width="310" height="212">
</canvas>
Related
I have retrieved image URL from firebase database but when i am trying to display the image retrieved on web page the size of image is not getting adjusted according to specification which i have provided in tag in body.The image obtained is covering entire background of web page.
JS
var myParam=location.search.split('itemKey=')[1];
alert(myParam);
firebase.database().ref('/Sell_Products/'+myParam).once('value').then(function(snapshot)
{var name=snapshot.child('name').val();
alert(name);
var image=snapshot.child('image').val();
var category=snapshot.child('category').val();
var description=snapshot.child('description').val();
var price=snapshot.child('price').val();
document.querySelector('img').src = image;
});
HTML
<img height="125" width="125"/>
Let's try this: <img style="height: 125px; width: 125px;"/>
You can modify height and width in javascript.
In your html file, add id to your image tag like this <img id="my_image"/>
In your javascript file, add var image = document.getElementById('my_image');
image.height = '125';
image.width = '125';
So I'm trying to create a Meme generator using the HTML5 canvas. I understand I can write on the canvas using the following:
ctx.filltext()
However, I can only write on the canvas once. Does anyone know how I could write on the canvas more than once or even twice as in multiple times. As with Meme generators they have one line of text at the top and one at the bottom of the image. If it's not possible could anyone let me know or point me in the direction of a tutorial/answer that could let me write on top of an image with text including changing the font and font size plus top/bottom, left/right.
Thanks to anyone who can help.
You can create a function that draws text given your desired styling arguments:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
drawText('This is the top',canvas.width/2,20,24,'verdana');
drawText('This is the bottom',canvas.width/2,canvas.height-20,16,'Courier');
function drawText(text,centerX,centerY,fontsize,fontface){
ctx.save();
ctx.font=fontsize+'px '+fontface;
ctx.textAlign='center';
ctx.textBaseline='middle';
ctx.fillText(text,centerX,centerY);
ctx.restore();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<canvas id="canvas" width=300 height=300></canvas>
I am using html canvas for resizing image.when i am loading image from project folder ,I am passing image path(img/tom.jpg)to canvas.draw method.After that i am getting base64url and then i am appending that url to the img src,That's working perfectly.But when i am picking image in cordova with cordovaImagepicker and then i am passing response url to canvas draw method ,i am getting base64 url but when i am appending that url to img src ,its coming totally black as square.Please help me ..
Here is my html(here in dummyImage {{this is image url that i picked up from device gallery}}):-
<img id="sourceImage" src="" style="display:none;">
<img id="dummyImage" width="150" height="150" src="{{image}}" alt="The Scream" style="display:none;">
<canvas id="myCanvas" width="230" height="230"style="display:none;">
<script>
$(document).ready(function(){
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var img = document.getElementById("dummyImage");
ctx.drawImage(img, 0,0, 230, 230);
$('#sourceImage').attr('src', canvas.toDataURL("image/jpeg"));
$.getScript('js/test.js');
});
</script>
Here is my console where in dummyImage(img tag id),i am getting picked image url and in sourceImage i am getting canvas resized url and see i am getting black image...
Your problem probably lies in using src="file:///data/data/...". The source should be something like /path/to/picture.jpg.
The canvas itself is not a black square, that's just the image rendering of an empty/transparent canvas. To confirm this, just remove display:none from the canvas element.
Fiddle: https://jsfiddle.net/u857pehs/1/
I've been doing a lot of research into Canvas and SVG, as well as CSS3 3d transforms, and I want to use them all together, and I'm having difficulty getting it all working. I've got an SVG element containing an image-based mask as well as a foreignObject element containing some HTML I'd like to mask, particularly, a canvas. Depending on what I do with the canvas, I'm getting different results in different browsers, and usually not what I want. Applying typical canvas operations, such as rect(), and applying typical css transformations, such as rotate3d(), will, in most browsers, cause the SVG image mask to no longer be applied to the canvas, and the entire canvas will be visible, including the masked part.
Safari (desktop): If the canvas has ever been drawn on or transformed in any way (even, for example, rotate3d(1,1,0,0deg)), it will not be masked.
Safari (iOS 7): If the canvas has ever been drawn on or transformed in any way, it will not be masked.
Chrome (desktop): Here, we can draw to the canvas and it will still be masked, but if it has been transformed, it will not be masked.
Chrome (iOS 7): If the canvas has been drawn on or transformed at all, it will not be masked.
Firefox: No problems here; it will still be masked even if it has been drawn on and transformed.
IE and others: I haven't checked yet.
You can see this illustrated by applying the following code, which is also hosted here, where I set up an example page: http://kage23.com/masktest.html
<svg width="748" height="421" baseProfile="full" version="1.2">
<defs>
<mask id="myMask" transform="scale(1)">
<image width="100%" height="421" xlink:href="http://i.imgur.com/ORtP2fW.png" />
</mask>
</defs>
<foreignObject id="foreignObject" width="100%" height="421">
<div style="background-color: green; width: 100%; height: 421px;">
<p id="myParagraph" style="padding-top: 100px; padding-left: 200px;">Some text or whatever.</p>
<canvas id="effectCanvas" width="500px" height="100px" style="background-color: red;"></canvas>
</div>
</foreignObject>
</svg>
<button onclick="applyMask()">Apply mask</button>
<button onClick="drawToCanvas()">Draw to canvas</button>
<button onClick="rotateCanvas()">Apply rotation to canvas</button>
<script>
var applyMask = function ()
{
var element = document.getElementById('foreignObject');
element.style.mask = 'url(#myMask)';
};
var drawToCanvas = function ()
{
var canvas = document.getElementById('effectCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
};
var rotateCanvas = function ()
{
var canvas = document.getElementById('effectCanvas');
canvas.style.webkitTransform = 'rotate3d(1,1,1,45deg)';
canvas.style.MozTransform = 'rotate3d(1,1,1,45deg)';
};
</script>
Is there a better way to do this? I'm not committed to using an SVG mask necessarily; I just need to be able to mask a transforming canvas that is also being actively drawn on. Originally, I was using -webkit-mask-box-image, but that's not supported very widely at all.
Is there a way to treat embed players like images in a fluid design?
I usually set the width of images to 100%, and let the browser calculate the height (modern browsers scale pictures with the original aspect ratio).
That's not the case with the <embed> element. I realize that the video information isn't given, but it should be available somehow, without fixed pixel values. In most cases only 16:9 and 4:3 aspect-ratios are used. If just those two values could be added, it would be a great help.
With width="100%" and/or style="width: 100%;" the embedded video fills the container properly (horizontally). The height should be (width/4*3) or (width/16*9) but as far as I know there's no way to calculate it.
I'd prefer a solution without inline styles, and even though the height and width attributes are required/recommended I don't like to add any specified length values in HTML. A CSS solution or a "secret" parameter for the embedded video would be ideal. If there's a youtube-specific solution, that's enough for me.
This solution worked perfectly for me.
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
^ CSS only liquid youtube embed dimensions.
With this you can completely remove the height and width attributes of the iframe. It will automatically fit it's parent container's width.
You could do it with jQuery. Something like this:
HTML:
<div>
<iframe></iframe>
</div>
JS:
var width = $('div').width();
var ratio = 16/9;
var height = width/ratio + 32; /* 32px is approx. height of controls */
$('iframe').css('height', height);
You would, however have to do it on window.resize aswell, if you want that functionality.
also, check out this little jQuery plugin by über-guru Chris Coyer: http://fitvidsjs.com
I just had to do this for a project in which I had an embedded youtube video centered on the page on top of a background image which was set to display 100vh x 100vh minus a bit of space for a header and stickynav bar. It was important that the youtube video not only scale but maintain a precise 30 pixel margin from the bottom of the image.
So I set the size of the background image on page load relative to the size of the window and define the dimensions of the iframe within the onYouTubeIframeAPIReady function which is called by the Youtube API only after the frame is loaded. I've also got the same function on window resize so that it will scale fluidly if you resize the browser window.
Since the vertical margin was an important issue I started with the height, setting the height of the iframe based on the height of the background image minus the space needed for margins. I then manually calculated the 16:9 aspect ratio for the width by dividing the height by 9 and multiplying by 16.
$( document ).ready(function() {
var content = $('#hero');
var contentH = $(window).height() - 158;
var contentW = $(window).width();
content.css('height',contentH);
} );
$(window).resize(function() {
var content = $('#hero');
var iframe = $('.videoWrapper iframe');
var contentH = $(window).height() - 158;
var iframeH = contentH - 150;
content.css('height',contentH);
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
var margin = ($(window).width() - iframeW) / 2;
$('.videoWrapper').style.marginLeft = margin;
} );
<div id="hero">
<div class="container">
<div class="row-fluid">
<hgroup class="span12 text-center" role="heading">
<h1></h1>
<h2></h2>
</hgroup>
<script src="https://www.youtube.com/iframe_api"></script>
<center>
<div class="videoWrapper">
<div id="player"></div>
</div>
</center>
<script>
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
videoId:'xxxxxxxxx',playerVars: {
controls:0,enablejsapi:1,iv_load_policy:3
}
} );
var content = $('#hero');
var iframe = $('.videoWrapper iframe');
var contentH = $(window).height() - 158;
var contentW = $(window).width();
var iframeH = contentH - 150;
iframe.css('height',iframeH);
var iframeW = iframeH/9 * 16;
iframe.css('width',iframeW);
}
</script>
</div>
</div>
</div>