6 Replies - 743 Views - Last Post: 18 October 2013 - 11:32 AM

#1 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Issues using HTML5 Canvas

Posted 18 October 2013 - 08:34 AM

I'm needing some assistance with HTML5 Canvas & CSS coding

I'm currently working on my site some more, figured I'd make use of a html5 tag, <canvas>
-I'm trying to hide (via css) an image of myself on the front page
--above the canvas so it's only showing inside the canvas

I'm setting the canvas to be 600 x 600 and figure if the canvas auto crops the photo due to it's own dimensions being smaller that's fine.
-it works on w3c http://www.w3schools..._canvas_tut_img
-doesn't work on my own site when I try it
=I'm going to recode it in the possibility I jumbled up img link or something else
=w3c validation shows two errors to do with " Line 88, Column 74: Stray start tag script.
…ipt type="text/javascript" src="http://stats.hosting24.com/count.php"></script> " which must be applied via the free 000webhost I'm currently using so I don't have a way to fix that

Is This A Good Question/Topic? 0
  • +

Replies To: Issues using HTML5 Canvas

#2 modi123_1  Icon User is online

  • Suitor #2
  • member icon



Reputation: 9059
  • View blog
  • Posts: 34,015
  • Joined: 12-June 08

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 08:40 AM

That's a bummer.

Though it's hard to diagnose what is going on without seeing what you are doing.
Was This Post Helpful? 0
  • +
  • -

#3 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 08:54 AM

I've now been able to achieve the basic desired effect, the img element being drawn into the html5 element canvas with css visibility:none hiding the original image so it only shows in the canvas.
=what I wasn't expecting was the space for the original img element to still be taken up by the img element even when it was hidden

I proceeded to do some research, and now I've found a way that through jquery I can have it hide the img element. The research info I found.

Below is the current coding I've used for jquery, in case I continue to fiddle with it.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>William Leininger</title>
<style type="text/css">
<!--
body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background: #D0FEFC;
	margin: 0; 
	padding: 0;
	text-align: center; 
/*	color: #000000; */
}
.oneColLiqCtrHdr #container {
	width: 80%;  
	background: #FFFDD0;
	margin: 0 auto; 
	border: 1px solid #000000;
	text-align: left;
}
.oneColLiqCtrHdr #header {
	background: #FFFDD0; 
	padding: 0 10px 0 20px; 
	text-align: center; 
}
.oneColLiqCtrHdr #header h1 {
	margin: 0; 
	padding: 10px 0; 
}
.oneColLiqCtrHdr #mainContent {
	padding: 0 20px; 
	background: #D0E9FE;
}
/* canvas styling begins */
#mycanvas {
	width: 100%; 
	height: 100% 
	margin: 0 auto; 
}
#william{
/*	visibility:hidden; */
}
/* canvas styling ends */
.oneColLiqCtrHdr #footer { 
	padding: 0 10px; 
	background:#FFFDD0;
} 
.oneColLiqCtrHdr #footer p {
	margin: 0; 
	padding: 10px 0; 
	text-align: center;
}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script>
<script>
function hideImage() {
  $('#william').hide();
}

</script>
</head>

<body class="oneColLiqCtrHdr">

<div id="container">
  <div id="header">
    <h1>~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/index.html">Home</a> ~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/about.html">About</a> ~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/works.html">Works</a> ~ </h1>
  <!-- end #header --></div>
  <div id="mainContent">
    <h1>
    	<img id="william" src="images/william.jpg" width="720" height="960" alt="william">
    </h1>  
<canvas id="myCanvas" width="650" height="600" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.</canvas>
<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("william");
ctx.drawImage(img,10,10);

</script>
  <!-- end #mainContent --></div>
  <div id="footer">
    <p>~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/index.html">Home</a> ~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/about.html">About</a> ~ <a href="file:///C|/Users/kc/Google Drive/WilliamsSite/works.html">Works</a> ~ </p>
  <!-- end #footer --></div>
<!-- end #container --></div>
</body>
</html>


Was This Post Helpful? 0
  • +
  • -

#4 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 09:32 AM

Didn't realize I didn't include a link to the site. facepalm

http://williamleininger.net16.net/
Was This Post Helpful? 0
  • +
  • -

#5 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3331
  • View blog
  • Posts: 11,278
  • Joined: 12-December 12

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 11:14 AM

I am not sure if you still have a question or you have fixed your issue..

Anyway, css-visibility only has the possible values hidden, visible, inherit, or collapse - not none. Visibility will leave a space where the element would be on the page: this is how it works. display: none would remove the element entirely; that is, not leave a space. jQuery's hide() method uses the css-display property.

Sounds like you need to spend some time studying css.

This post has been edited by andrewsw: 18 October 2013 - 11:17 AM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3331
  • View blog
  • Posts: 11,278
  • Joined: 12-December 12

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 11:20 AM

BTW You are missing a semi-colon in here:

#mycanvas {
	width: 100%; 
	height: 100% 
	margin: 0 auto;

Was This Post Helpful? 0
  • +
  • -

#7 l2g2h007  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 22
  • Joined: 26-August 13

Re: Issues using HTML5 Canvas

Posted 18 October 2013 - 11:32 AM

Yes I need to study a lot of this HTML -> CSS -> Javascript & JQuery -> HTML5 & CSS3 though my issue is none of this is intuitive or makes native sense to me. Approaching it I don't even know where a logical start is when it all doesn't make sense yet it's something I need to learn. Its enough to make me scream, go for a jog and come back to realize nothing's changed other than my heartrate and calories burned for the day.

/end rant

Thank you andrewsw, you're always there providing the answer, just wish I knew how to approach learning coding to get off your back and helping instead.

/end rant

back to http://www.w3schools.com/ I go.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1