Setting up Background image for a canvas - javascript

I am trying to set up a image to a canvas but I am not able to do it. I am not able to find any mistake. The canvas comes up on the inspect element but the image is not setting up.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel="stylesheet" href="CSS/styling.css">
<script src="JavaScript/setImage.js"></script>-->
</head>
<body>
<canvas id="canvas" style="color: #0cff15; -webkit-background-image: url(/cheque.jpg)" ></canvas>
</body>
</html>

You don't style a canvas element like a div. You have to get its context via javascript and draw into it. Search for "mdn canvas" for documentation and read a bit.

You can set background image using css and you should give width and height property as well. Please see my demo below.
#canvas{
color: #0cff15;
background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
-webkit-background-image: url("http://www.backgroundsy.com/file/dust-background.jpg");
border:1px solid black;
width:500px;
height:500px;
}
<canvas id="canvas"></canvas>

Related

How to fix the issue CSS is not reflecting on Iframe of Air-Table?

I am trying to add CSS property inside the Air-Table iframe but CSS didn't reflect.
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe class="airtable-embed" id="calender" src="https://airtable.com/embed/shriqTxajodBzOTYb?backgroundColor=teal&viewControls=on" frameborder="0" onmousewheel="" width="100%" height="533" style="background: transparent; border: 1px solid #ccc;"></iframe>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#calender').on('load', function() {
$("iframe").contents().find("#embedBottomBarContainer").css("display", "none");
});
});
</script>
If I remember correctly, you can only affect the Style of the IFrame if it comes from the same Server as your Website because of the same-origin policy.
So that's probably the problem. You're trying to change the Style of a not same-origin IFrame

How to remove unwanted content like url while print automatically in jquery

I am trying print my page automatically using jQuery.But problem is red dot circle appear.So how to remove them ?3
This is my html file look like
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
Hello From Other side
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
window.onload = function () {
window.print();
}
</script>
</body>
</html>
So i want to remove that red dot circle part like url name and title Name.
Please Try this from this link How to remove the URL from the printing page?
<style media="print">
#page {
size: auto;
margin: 0;
}
</style>
its a browser default behaviour. you should unchecked the header checkbox

TweenMax GSAP not animating, only works in codepen?

Just started with GSAP Tweenmax, but i ran in some issues. Probably it's a stupid mistake i made, but i can't figure it out.
When i run this code on Codepen it works, but when i run it from my webserver it doesn't do anything.
HTML:
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!--CDN links for TweenLite, CSSPlugin, and EasePack-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="./js/main-test.js"></script>
<style>
#svg{position: absolute;}
</style>
</head>
<body>
<div id="svg"><p>testtesttesttest</p></div>
</body>
</html>
And this is the js:
var anim = document.getElementById('svg');
TweenMax.to(anim, 2, {left:"100px"})
Can someone please tell me what i'm doing wrong?
Thank you,
Michael
I already found the issue, i loaded the js script in the header.
The only thing i needed to do was to replace the script at the end of the html file so it could find the 'id' of the div to animate.

JQuery based Full Width Responsive Image Slider corrupt?

So I am developing my first responsive full width image slider in JQuery.
I've been working with JQuery before but never image sliders so I am not sure if its my code that is corrupt or if its the cycle2 that is playing a game with me.
So the issue I am having is that when I open my webpage to see the slider itself its not showing the pictures. I am leaning against the idea of the cycle2 file being outdated or something but I cant know for sure unless someone who uses it alot can confirm it.
To me my code looks perfect, I cant find any issues since it is such a short code.
Here is what my issue looks like http://imgur.com/3QUUbpc
And here is the source code for my file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.js"></script>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.cycle2.min.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\Untitled.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp2.png">
</div>
</body>
</html>
Try this code out:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
</body>
</html>
https://jsfiddle.net/1qjgwz31/

Background image for iframe

<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<div style="background-image: url('images1.jpg');width:800;height:300;border:1px solid black">
<iframe scrolling="auto" allowtransparency="true" name="main" style="width:100%;height:90%;"> </iframe>
</div>
</BODY>
</HTML>
I need to add background image to iframe. so i tried to add background image to iframe but i cant .. so i did it using div tag as above.
Its works properly in firefox but not in IE. Please help me if u known this
You can with background-image in css
iframe{
background:url(http://www.hindsightfishing.com/images/waves_bg.jpg) no-repeat left top
}​
Demo here http://jsfiddle.net/9tndk/

Categories