To fade only a part of a image in html - html

I have an image and I want to fade the central circular portion of the image to be shown clear and the rest of the portion to be faded.
I tried with canvas as well as by taking two divs and making one of them fade,
but not working.
Following is the pattern i need, with the area out of the circle to be faded. Please Help!!

Here's a starting point for you to get an image that's clear center and fade-to-color outside:
position 2 canvases -- one on top of the other
draw the image on the bottom canvas
fill the top canvas with your color (blue,etc)
use a combination of scaling, shadowing and compositing to "reveal" the image underneath
Demo: http://jsfiddle.net/m1erickson/HtL4P/
Example code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{position:absolute;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var img=new Image();img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/landscape2.jpg";
function start(){
canvas.width=canvas1.width=img.width/3;
canvas.height=canvas1.height=img.height/3;
ctx.drawImage(img,0,0,img.width,img.height,0,0,img.width/3,img.height/3);
ctx1.fillStyle="dodgerblue";
ctx1.fillRect(0,0,canvas1.width,canvas1.height);
ctx1.save();
ctx1.scale(3,1);
ctx1.globalCompositeOperation="destination-out";
ctx1.arc(-100,120,40,0,Math.PI*2);
ctx1.shadowColor="white";
ctx1.shadowBlur=60;
ctx1.shadowOffsetX=500;
ctx1.fill();
ctx1.restore();
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=356 height=237></canvas>
<canvas id="canvas1" width=356 height=237></canvas>
</body>
</html>

Related

HTML To Fit an image only in specific resolution

I want to display an image (It can be of any size) only in a table of 1280 x 800 Resolution it will not display on other screens.
Now I'm using an <img> element inside the body, and if the image is small, it doesn't fill the screen and if the image is big, it display it out off the screen.
So the html is this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mapa</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script src="/libs/qimessaging/1.0/qimessaging.js"></script>
<script type="text/javascript" src="js/senaletica.js"></script>
</head>
<body>
<img id="mapa" alt="mapa" src="">
</body>
</html>
And the javascript:
$('document').ready(function(){
var session = new QiSession();
session.service("ALMemory").done(function (ALMemory) {
ALMemory.subscriber("PepperQiMessaging/totablet").done(function(subscriber) {
subscriber.signal.connect(toTabletHandler);
});
});
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'data:image/png;base64,' + value);
imgMap.width($('window').width());
imgMap.height($('window').height());
}
});
I don't use any CSS at the moment.
window is an actual javascript entity and should not be quoted, which then makes it a string. Removing the quotes from 'window' will solve your problem.
See Below Snippet :
$(document).ready(function(){
function toTabletHandler(value) {
var imgMap = $('#mapa');
imgMap.attr('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSd8cAJmOsrWimMAMpTAFOPURbw4q7uDKKxau1nimZ4V-usMb0w');
imgMap.width($(window).width());
imgMap.height($(window).height());
}
toTabletHandler(5);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<img id="mapa" alt="mapa" src="">
</body>

Create HTML canvas outside of current window

Right now I have a canvas pop-up, but I want it to be separate from the window from which it is originated (it's stuck within the boundaries of the first window, I can only drag it within the first window).
Is there any way to do this?
You can open a new browser instance with: window.open(aURL,'name','width=400,height=400')
1. Create an html file for your popup
Put this code into popupTest.html:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
window{width:300px; height:150px; }
body{ background-color: ivory;}
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font='14px verdana';
ctx.fillText('I am a popup canvas.',20,50);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
2. Open the popup (popupTest.html) in a new browser instance
Put this code into runPopup.html and open it:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
</style>
<script>
$(function(){
var popupURL='popupTest.html';
function myPopup(url){
window.open(url,'myPopup','width=400,height=400,toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,copyhistory=no,resizable=yes');
return false;
}
$('#pop').on('click',function(){
myPopup(popupURL);
return(false);
});
}); // end $(function(){});
</script>
</head>
<body>
<button id=pop>Open Popup</button>
</body>
</html>
Note about opening your popup
This method requires the user to trigger the popup (eg button-click or anchor-click). If you want to programmatically trigger the popup you must be sure the user has any popup blocker turned off or else your popup will be blocked.

Canvas contenteditable not working

I created canvas as contenteditable ='true' and paste image from clipboard on top of the canvas. The image appeared beside the canvas not on top of the canvas as per image below. I get empty image when try to convert the canvas to image. This is because my canvas doesn't hold the image i paste earlier. How do I get the image?
HTML
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
function convert()
{
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
//ctx.fillRect(50,50,150,75);
var theImage=document.getElementById("toImage");
theImage.src=canvas.toDataURL();
}
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300 contenteditable='true'></canvas>
<button type="button" onClick="convert()">Click</button>
<img id="toImage" width=300 height=300>
</body>
</html>
Image
The contenteditable attribute is for text-related HTML elements, and does nothing with the <canvas> element.
See the MDN for details on contenteditable.
The Canvas Element is not an exception to contexteditable properties the difference between the canvas element and other elements is that the text inside of the canvas tag is dealing only with what shows when the canvas element is not supported. and contexteditable by definition is dealing with the text inside the element tag not the canvas ctx context that youre actually looking for. you want to look for the draw image method on your canvas a demo can be found on the w3Schools site

What is the relation between the size and resolution of HTML5 canvas

Is there a way by which I can create a canvas of large size but low resolution. I'm declaring the canvas with the syntax <canvas id="mycanvas" width="700" height="1000"></canvas>. I'm running the above code on a 7 inch tablet and the canvas spans half of the screen of the canvas. Is there a way by which I can create a canvas which again covers half of the screen but has a lower resolution (lower quality of image).
Actually I draw something on the canvas and then save it as image by using canvas.toDataURL(). I don't need to get good quality image, but I want to lower the size of the image generated.
Forgive me if it's a silly question
First, scale your canvas element like this (in javascript):
canvas.width=canvas1.width*scaleFactor;
canvas.height=canvas1.height*scaleFactor;
Warning: If you scale the canvas using CSS, you will likely distort images drawn on the canvas
Then you can scale your image using some added arguments to context.drawImage
var scaleFactor=0.50;
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
Here is code and a Fiddle: http://jsfiddle.net/m1erickson/6m8kg/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:15px;}
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas1");
var ctx1=canvas1.getContext("2d");
var canvas2=document.getElementById("canvas2");
var ctx2=canvas2.getContext("2d");
var scaleFactor=0.50;
var img=document.createElement("img");
img.onload=function(){
// draw the image full-size on the larger canvas
ctx1.drawImage(img,0,0);
// resize the canvas
// Don't use css to resize, it will distort your image
// The scaling is done with the added drawImage arguements
canvas2.width=canvas1.width*scaleFactor;
canvas2.height=canvas1.height*scaleFactor;
// draw a scaled-down image into the second canvas
ctx2.drawImage(img, 0,0,img.width,img.height,
0,0,img.width*scaleFactor,img.height*scaleFactor);
}
img.src="faces.png";
}); // end $(function(){});
</script>
</head>
<body>
<p>Top canvas is full-sized</p>
<canvas id="canvas1" width=400 height=242></canvas><br>
<p>Bottom canvas is scaled down</p>
<canvas id="canvas2" width=300 height=300></canvas>
</body>
</html>

filltext without coordinates

so i have made a circle in the canvas, and i'm trying to have a line of text in it.
the problem is, the filltext code line generates the text at a particular given coordinate, but i dont want that.
is there a way to have the line of text stay inside the circle?
var programFill = function ( context ) {
context.beginPath();
context.arc( 0, 0, 1, 0, PI2, true );
context.font="20px Georgia";
context.fillText("Hello World!",10,50);
context.closePath();
context.fill();
}
Draw filled text inside a circle
Here's an example of how to put text inside a circle: http://jsfiddle.net/m1erickson/BUkKt/
Notice context.beginPath() is called twice because you are doing 2 fills. The first to draw the filled circle and the second to change the fill color and draw the filled text.
And here is the code:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas1=document.getElementById("canvas");
var context=canvas1.getContext("2d");
context.beginPath();
context.fillStyle="yellow";
context.strokeStyle="black";
context.font="20px Georgia";
context.lineWidth=10;
context.arc(100,100, 75, 0 , 2 * Math.PI, false);
context.fill();
context.beginPath();
context.fillStyle="red";
context.fillText("Hello World!",40,100);
context.fill();
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas><br/>
</body>
</html>