Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

Revision 691953 of Graphics on the Web

  • Revision slug: Web/Guide/Graphics
  • Revision title: Graphics on the Web
  • Revision id: 691953
  • Created:
  • Creator: Mutijima
  • Is current revision? No
  • Comment

Revision Content

Modern Web sites and applications often need to present graphics. Displaying static images can easily be done using the {{HTMLElement("img")}} element, or by setting the background of HTML elements using the {{cssxref("background-image")}} property. You often want to construct graphics on-the-fly, or manipulate images after the fact. These articles provide insight into how you can accomplish this.

2D Graphics

Canvas
The {{HTMLElement("canvas")}} element provides                                                          APIs to draw 2D graphics using JavaScript.
SVG
Scalable Vector Graphics (SVG) lets you use lines,                                                       curves, and other geometric shapes to render graphics.                                                 By avoiding the use of bitmaps, you can create images                                                that scale cleanly to any size.

 

 

 

 

View All...

3D Graphics

WebGL
A guide to getting started with WebGL, the 3D graphics API for the Web. This technology lets you use standard OpenGL ES in Web content.

Video

Using HTML5 audio and video
Embedding video in an HTML document and controlling the playback.
WebRTC
The RTC in WebRTC stands for Real-Time Communications, technology that enables audio/video streaming and data sharing between browser clients (peers).

 

Revision Source

<p><span class="seoSummary">Modern Web sites and applications often need to present graphics.</span>&nbsp;Displaying static images can easily be done using the {{HTMLElement("img")}} element, or by setting the background of HTML elements using the {{cssxref("background-image")}} property. You often want to construct graphics on-the-fly, or manipulate images after the fact. <span class="seoSummary">These articles provide insight into how you can accomplish this.</span></p>
<div class="row topicpage-table">
 <div class="section">
  <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">2D Graphics</h2>
  <dl>
   <dt>
    <a href="/en-US/docs/HTML/Canvas">Canvas</a></dt>
   <dd>
    <em>The {{HTMLElement("canvas")}} element provides&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </em><em>APIs to draw 2D graphics using JavaScript.</em></dd>
   <dt>
    <a href="/en-US/docs/Web/SVG">SVG</a></dt>
   <dd>
    <em>Scalable Vector Graphics (SVG) lets you use lines,&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; curves, and other geometric shapes to render graphics.&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; By avoiding the use of bitmaps, you can create images&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; that scale cleanly to any size.</em></dd>
  </dl>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <p><span class="alllinks"><a href="/en-US/docs/tag/Graphics">View All...</a></span></p>
 </div>
 <div class="section">
  <h2 class="Documentation" id="Docs_for_add-on_developers" name="Docs_for_add-on_developers">3D Graphics</h2>
  <dl>
   <dt>
    <a href="/en-US/docs/Web/WebGL">WebGL</a></dt>
   <dd>
    <em>A guide to getting started with WebGL, the 3D graphics API for the Web. This technology lets you use standard OpenGL ES in Web content.</em></dd>
  </dl>
  <h2 id="Video">Video</h2>
  <dl>
   <dt>
    <a href="/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video">Using HTML5 audio and video</a></dt>
   <dd>
    <em>Embedding video in an HTML document and controlling the playback.</em></dd>
   <dt>
    <a href="/en-US/docs/WebRTC">WebRTC</a></dt>
   <dd>
    <em>The RTC in WebRTC stands for Real-Time Communications, technology that enables audio/video streaming and&nbsp;data sharing&nbsp;between browser clients (peers).</em></dd>
  </dl>
 </div>
</div>
<p>&nbsp;</p>
Revert to this revision