Kids Learning Javascript: Kids learn coding like playing games by Yang Hu

Author:Yang Hu [Hu, Yang]
Language: eng
Format: azw3
Published: 2020-04-13T16:00:00+00:00

<script type ="text/javascript" >

var canvas = document.getElementById( "myCanvas" );

//Begin a path create a line move from (20,100) to (200,100):

var context = canvas.getContext( "2d" );

context.beginPath();

context.moveTo( 20 , 100 );

context.lineTo( 200 , 100 );

context.stroke();

</script>

3. Draw a Rectangle on Canvas

context.fillRect(x, y, width, height): draw a rectangle on the canvas.

context.fillStyle: the color to fill rectangle(red : #ff0000, green: #00ff00, blue: #0000ff).

<style>

#myCanvas{

border:1px solid #c3c3c3;

}

</style>

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

<script type ="text/javascript" >

var canvas = document.getElementById( "myCanvas" );

//Begin a path create a rectangle

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.