CSS. Canvas

The <canvas> element is used to draw graphics, on the fly, on a web page.

The example at the left shows a red rectangle, a gradient rectangle, a multicolor rectangle, and some multicolor text that is drawn onto the canvas.

Internet Explorer 9+, Firefox, Opera, Chrome, and Safari support the <canvas> element. Note: Internet Explorer 8 and earlier versions, do not support the <canvas> element.

Modifying the Canvas with CSS. Because the canvas is an HTML element, you can use CSS styles to modify its position, assign it a background color or image, add a border, and so on.In Safari and other WebKit-based browsers, you can use WebKit transitions to smoothly animate changes in CSS properties.Because the canvas can have a transparent background, you can use CSS to create animated graphics that roam freely across the webpage.

A canvas is a rectangular area on an HTML page, and it is specified with the <canvas> element.

Note: By default, the <canvas> element has no border and no content.

The markup looks like this:

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

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.

Example

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

style="border:1px solid #000000;">

</canvas>

CSS. Attributes of the scroll bar.

There may be a case when an element's content might be larger than the amount of space allocated to it. For example given width and height properties did not allow enough room to accommodate the content of the element.

CSS provides a property called overflow which tells the browser what to do if the box's contents is larger than the box itself. This property can take one of the following values:Value Description

Visible - Allows the content to overflow the borders of its containing element.

Hidden - The content of the nested element is simply cut off at the border of the containing element and no scrollbars is visible.

Scroll - The size of the containing element does not change, but the scrollbars are added to allow the user to scroll to see the content.

Auto - The purpose is the same as scroll, but the scrollbar will be shown only if the content does overflow.

.scroll{ display:block; border: 1px solid red; padding:5px;

margin-top:5px; width:300px; height:50px; overflow:scroll; }

.auto{

display:block;

border: 1px solid red;

padding:5px;

margin-top:5px;

width:300px;