Scribd
Upload
27 views14 pages

HTML5 Canvas and Audio Examples

The document contains HTML code demonstrating various multimedia elements such as audio controls, YouTube iframes, and HTML5 canvas functionalities. It includes examples of drawing shapes, text, and gradients on the canvas using JavaScript. Additionally, it showcases how to embed images within a canvas element.

Uploaded by

anay.somani30
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
27 views14 pages

HTML5 Canvas and Audio Examples

The document contains HTML code demonstrating various multimedia elements such as audio controls, YouTube iframes, and HTML5 canvas functionalities. It includes examples of drawing shapes, text, and gradients on the canvas using JavaScript. Additionally, it showcases how to embed images within a canvas element.

Uploaded by

anay.somani30
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

Name – Anay Somani

Registration number- 24BCE11437

<! DOCTYPE html>

<html>

<body>

<audio controls>

<source src="[Link]" type="audio/ogg"> <source

src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

</body>

</html>
<audio controls autoplay>

<source src="[Link]" type="audio/ogg"> <source

src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

<audio controls autoplay muted>

<source src="[Link]" type="audio/ogg"> <source

src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

<! DOCTYPE html>

<html>

<body>
<iframe width="420" height="345"
src="[Link]

</iframe>

</body>

</html>

<iframe width="420" height="345"


src="[Link]

autoplay=1&mute=1">

</iframe>

<iframe width="420" height="315"

src="[Link]
">

</iframe>

<iframe width="420" height="345"


src="[Link]

controls=0"> </iframe>
<iframe width="420" height="345"
src="[Link]

controls=1">

</iframe>

<canvas id="myCanvas" width="200" height="100"></canvas>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#000000;">

</canvas>
<!DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas - Draw a Line</h1>

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid


#000000;">

Sorry, your browser does not support canvas.

</canvas>

<script>

// Create a canvas const canvas =

[Link]("myCanvas"); const ctx =

[Link]("2d");

// Define a new path [Link]();

// Set a start-point [Link](0,0);


// Set an end-point [Link](200,100);

// Draw it

[Link]();

</script>

</body>

</html>

<!-- [Link]();

[Link](0, 0);

[Link](200, 100);

[Link] = 10;

[Link]();

[Link](); [Link](0,

0); [Link](200, 100);

[Link] = 10;

[Link] = "red";

[Link]();

[Link](); [Link](0,0); [Link](175,75); [Link] = 10; [Link] =

"round"; [Link](); -->


[Link] = "green"; [Link](10,10,

100,100);

[Link] = "blue"; [Link]

= 5; [Link](10,10, 100,100);

[Link] = "green"; [Link](10,10,

100,100); // the outline rectangle

[Link] = "blue"; [Link]

= 5; [Link](10,10, 100,100);

<! DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas linearGradient()</h1>


<canvas id="myCanvas" width="300" height="150" style="border: 1px solid grey;">

Sorry, your browser does not support canvas.

</canvas>

<script> const c =

[Link]("myCanvas"); const ctx

= [Link]("2d");

// Create linear gradient const

grad=[Link](0,0,280,0);

[Link](0, "lightblue");

[Link](1, "darkblue");

// Fill rectangle with gradient [Link]

= grad; [Link](10,10,280,130);

</script>

</body>

</html>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid
#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>

<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); [Link](0,0);

[Link](200,100); [Link]();

</script>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>

<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); [Link]();

[Link](95,50,40,0,2*[Link]); [Link]();

</script>
To draw a Text

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid


#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>

<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); [Link] = "30px Arial";

[Link]("Hello World",10,50);

</script>

To draw a Stroke Text

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid


#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>
<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); [Link] = "30px Arial";

[Link]("Hello World",10,50);

</script>

To Draw Linear Gradient

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid


#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>

<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); // Create gradient var grd

= [Link](0,0,200,0);

[Link](0,"red");

[Link](1,"white");

// Fill with gradient [Link]

= grd;

[Link](10,10,150,80);

</script>

To Draw Circular Gradient

<canvas id="myCanvas" width="200" height="100" style="border: 1px solid


#d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>
<script> var c =

[Link]("myCanvas"); var ctx

= [Link]("2d");

// Create gradient var grd =

[Link](75,50,5,90,60,100);

[Link](0,"red");

[Link](1,"white");

// Fill with gradient [Link]

= grd;

[Link](10,10,150,80);

</script>

Draw image
<p>Image to use :< /p>

<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220"


height="277">

<p>Canvas to fill :< /p>

<canvas id="myCanvas" width="250" height="300" style="border:1px

solid #d3d3d3;">

Your browser does not support the HTML canvas tag .< /canvas>

<p><button onclick="myCanvas()">Try it</button></p>

<script> function myCanvas () { var c =

[Link]("myCanvas"); var ctx

= [Link]("2d"); var img =

[Link]("scream");

[Link](img,10,10);

</script>

Canvas to fill:

You might also like