Course: Web Design and Digital Content Production , Topic: Module 10: Images- The Canvas HTML element

Topic outline

General
Terminology and aims of the course:

Web Design

Digital Content Creation

Wordpress blog site

Web Design refers to the HTML (structure), CSS (style), and JavaScript (interaction) technologies used in browser-Web Server communication, resulting in web pages being displayed to the end user.

The first aim of this course is to learn, understand and apply the above technologies to create simple code-based websites.

With the term Digital Content Production, we describe the production - editing of images, audio documents and video.

The second aim of this course is to learn, understand and use free software to create audio and video files.

In this course, it is necessary to familiarize students with the "remote" computer, the Web Server, and the structure of a website. To achieve that, students will create a Wordpress blog in which they will upload some of the material they have created.

The third aim of this course is to learn, understand and create a Wordpress blog site and upload content to it.
- URL
  
  Code+Create Course Questionnaire URL
- Feedback
  
  Prior Knowledge Self-Assessment Feedback
- Page
  
  For this course, you need... Page
- Glossary
  
  Course glossary

Module 10: Images- The Canvas HTML element

Highlighted
Canvas HTML element. The RGBAs of images. Image manipulation.

Canvas HTML element

The RGBAs of images

Image manipulation

Canvas HTML element.The HTML5 canvas element is a workspace upon which you draw (and manipulate) images and text. In this submodule , we will learn how to create canvas elements . We will also learn methods to create, access and modify text, shapes and images on the fly, via JavaScript.

The RGBAs of images.One of the most common ways to represent color on the web is via RGBA. An RGBA color value is specified with rgba (red, green, blue, alpha), the alpha parameter represents the transparency-opacity of a pixel. In this submodule , we will learn how to create the bitmap of an image which is an array that maps these four numbers to each pixel.

Image manipulation. In this submodule we will learn to combine the canvas element with JavaScript methods to manipulate the bitmap of an image and change its colors.
- Page
  
  Aims - Expected outcomes- Key concepts Images- The Canvas HTML element Page
  
  View
- Book
  
  Submodule 10.1: Canvas HTML element Book
  
  View
  Text
  
  Drawing
  
  Image
- Book
  
  Image manipulation Book
  
  View
  Manipulate the colors