Scribd Logo
Upload

Welcome to Scribd!

  • CGPL Lecture1

    Uploaded by

    Ralph Cadalzo
    0 views20 pages
    This document provides an introduction and overview of HTML5 Canvas and JavaScript programming. It discusses the basic structure of an HTML5 page, how to add a Canvas element, retrieve the 2D drawing context, and start drawing content like rectangles and text. The key points are setting up the HTML document with a Canvas tag, using JavaScript to reference the Canvas and get the 2D context, and then calling drawing methods like fillRect(), fillText(), etc. to display shapes and other visual elements on the canvas.

    Original Description:

    CGPL_Lecture1

    Original Title

    CGPL_Lecture1

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    This document provides an introduction and overview of HTML5 Canvas and JavaScript programming. It discusses the basic structure of an HTML5 page, how to add a Canvas element, retrieve the 2D drawing context, and start drawing content like rectangles and text. The key points are setting up the HTML document with a Canvas tag, using JavaScript to reference the Canvas and get the 2D context, and then calling drawing methods like fillRect(), fillText(), etc. to display shapes and other visual elements on the canvas.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    0 views20 pages

    CGPL Lecture1

    Uploaded by

    Ralph Cadalzo
    This document provides an introduction and overview of HTML5 Canvas and JavaScript programming. It discusses the basic structure of an HTML5 page, how to add a Canvas element, retrieve the 2D drawing context, and start drawing content like rectangles and text. The key points are setting up the HTML document with a Canvas tag, using JavaScript to reference the Canvas and get the 2D context, and then calling drawing methods like fillRect(), fillText(), etc. to display shapes and other visual elements on the canvas.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as pdf or txt
    of 20

    Module 1

    COMPUTER
    GRAPHICS
    PROGRAMMING
    Introduction to HTML5 Canvas
    01
    HTML5
    HTML is the standard language used to
    construct pages on the World Wide Web.
    BASIC HTML5 PAGE
    ● A basic HTML page is divided into sections, commonly <head>
    and <body>. The new HTML5 specification adds a few new
    sections, such as <nav>, <article>, <header>, and <footer>.

    ● The <head> tag usually contains information that will be used by


    the HTML <body> tags to create the HTML page.

    ● It is a standard convention to put JavaScript functions in the


    <head>, as you will see later when we discuss the <canvas> tag.
    BASIC HTML5 PAGE
    ● Basic HTML for a page might look like this:
    BASIC HTML5 PAGE
    ● <!doctype html> This tag informs the web browser to render the
    page in standards mode. According to the HTML5 spec from W3C,
    this is required for HTML5 documents.

    ● <html lang=“en”> This is the <html> tag with the language


    referenced: for example, "en" = English. Some of the more
    common language values are:
    ○ Chinese: lang = "zh"
    ○ French: lang = "fr“
    ○ Spanish (Castilian): lang = "es"
    BASIC HTML5 PAGE
    ● <meta charset=“UTF-8”> This tag tells the web browser which
    character-encoding method to use for the page. Unless you know
    what you’re doing, there is no need to change it.

    ● <title>...</title> This is the title that will be displayed in the


    browser window for the HTML page. This is a very important tag,
    because it is one of the main pieces of information a search
    engine uses to catalog the content on the HTML page.
    BASIC HTML5 PAGE
    ● <div> This is the main HTML tag that we will use in this book. We
    will use it to position <canvas> on the HTML page.
    BASIC HTML5 PAGE
    ● <canvas> Our work with <canvas> will benefit from using the
    absolute positioning method with <div>. We will place our
    <canvas> inside the <div> tag, and it will help us retrieve
    information, such as the relative position of the mouse pointer
    when it appears over a canvas.
    DOCUMENT OBJECT MODEL
    ● The Document Object Model represents all the objects on an
    HTML page. It is language neutral and platform-neutral, allowing
    the content and style of the page to be updated after it is
    rendered in the web browser.
    ● The DOM is accessible through JavaScript and has been a staple
    of JavaScript, DHTML, and CSS development since the late 1990s.
    ● The canvas element itself is accessible through the DOM in a web
    browser via the Canvas 2D context, but the individual graphical
    elements created on Canvas are not accessible to the DOM.
    02
    JAVASCRIPT
    JavaScript is a scripting or programming
    language that allows you to implement
    complex features on web pages.
    JAVASCRIPT
    ● JavaScript will be used to create Canvas applications for the
    reason it can be run inside nearly any web browser.

    ● Where will JavaScript be inserted?

    ● It’s a good idea to place your JavaScript in the <head> of your


    HTML page because it makes it easy to find.
    ● You also have the choice to place it before the </body> at the
    end of an HTML document to make sure that the whole page
    loads before the JavaScript runs.
    ● Lastly, JavaScript can also be added via the use of an external file.
    JAVASCRIPT
    ● Using JavaScript via an external file.
    ADDING CANVAS TO HTML PAGE
    ● In the <body> section of the HTML page, add a <canvas> tag
    using code such as the following:

    ● Between the opening and closing tags, you can put text that will
    be displayed if the browser executing the HTML page does not
    support Canvas. For our Canvas applications, we will use the text
    “Your browser does not support HTML5 Can‐ vas.
    USING THE DOCUMENT OBJECT TO REFERENCE THE CANVAS ELEMENT
    IN JAVASCRIPT

    ● We will now make use of the DOM to reference the we defined


    in HTML. Recall that the document object represents every
    element of an HTML page after it has loaded.
    ● First, we will define a new variable named theCanvas that will
    hold the reference to the Canvas object.
    ● Next, we retrieve a reference to canvasOne by calling the
    getElementById() function of document, and passing the name
    canvasOne, which we defined as the id of the tag we created in
    the HTML page:
    Retrieving the 2D Context
    ● We need to get a reference to the 2D context so that we can
    manipulate it. HTML5 Canvas is designed to work with multiple
    contexts, including a proposed 3D context.

    ● The HTML5 2D context (the CanvasRenderingContext2D object),


    retrieved by a call to the getContext() method of the Canvas
    object, is where all the action takes place.
    ● The CanvasRenderingContext2D contains all the methods and
    properties we need to draw onto the canvas.
    Retrieving the 2D Context
    ● The CanvasRenderingContext2D uses a Cartesian coordinate
    system with 0,0 at the upper-left corner of the canvas, with
    coordinates increasing in value to the right and down.
    03
    Drawing Content
    DRAWING CONTENT
    ● First clear the drawing area. The following two lines of code draw
    a yellow box on the screen that is the same size as the canvas.
    fillStyle() sets the color, and fillRect() creates a rectangle and puts
    it on the screen:
    DRAWING CONTENT
    ● Next is adding text as the content of the Rectangle background.
    ● Set the color of the text in the same way the color of the
    rectangle was set

    ● Set the font size and weight

    ● Set the vertical alignment of the text


    DRAWING CONTENT
    ● Lastly, print the text on the screen by calling the fillText() method
    of the context object. The three parameters of this method are
    text string, x position, and y position.

    You might also like