Articles tagged: Graphics

Found 126 documents

Archive/Apps/Graphics_and_UX When creating Open Web Apps, you need to give a lot of consideration to the look and feel, user ...
Games/Techniques/3D_on_the_web For rich gaming experiences on the Web the weapon of choice is WebGL, which is rendered on HTML ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls It is nice to see our ball moving, but it quickly disappears from the screen, limiting the fun ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Build_the_brick_field After modifying the gameplay mechanics, we are now able to lose — this is great as it means the ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Game_over It's fun to watch the ball bouncing off the walls and be able to move the paddle around, but ...
Games/Tutorials/2D_Breakout_game_pure_JavaScript/Paddle_and_keyboard_controls The ball is bouncing off the walls freely and you can watch it indefinitely, but currently ...
Glossary/Canvas The HTML canvas element provides an empty graphic zone on which specific JavaScript APIs can ...
Glossary/Pixel A pixel is the smallest building block of a graphical display like a computer screen.
Glossary/SVG Scalable Vector Graphics (SVG) is a 2D vector image format based on an XML syntax.
Learn/HTML/Howto/Add_a_hit_map_on_top_of_an_image When you nest an image inside a, the entire image links to one webpage. An image map, on the ...
Learn/HTML/Multimedia_and_embedding/Adding_vector_graphics_to_the_Web This article has provided you with a quick tour of what vector graphics and SVG are, why they ...
Learn/HTML/Multimedia_and_embedding/Responsive_images That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As ...
Learn/WebGL/By_example
Learn/WebGL/By_example/Basic_scissoring
Learn/WebGL/By_example/Clearing_by_clicking
Learn/WebGL/By_example/Clearing_with_colors
Learn/WebGL/By_example/Color_masking
Learn/WebGL/By_example/Detect_WebGL
Learn/WebGL/By_example/Hello_GLSL
Learn/WebGL/By_example/Hello_vertex_attributes
Learn/WebGL/By_example/Raining_rectangles
Learn/WebGL/By_example/Scissor_animation
Learn/WebGL/By_example/Simple_color_animation
Learn/WebGL/By_example/Textures_from_code
Learn/WebGL/By_example/Video_textures
Mozilla/Add-ons/Code_snippets/Canvas For general information about using canvas see the canvas topic page.
Mozilla/B2G_OS/API/CameraCapabilities The CameraControl.capabilities property returns a CameraCapabilities object, which describes all ...
Mozilla/B2G_OS/API/CameraCapabilities/effects The effects property value is an Array identifying the effects (such as normal, sepia, mono, ...
Mozilla/B2G_OS/API/CameraCapabilities/fileFormats The fileFormats property is an Array identifying the file formats supported by the camera, such ...
Mozilla/B2G_OS/API/CameraCapabilities/flashModes The flashModes property is an Array of strings identifying each of the flash modes supported by ...
Mozilla/B2G_OS/API/CameraCapabilities/focusModes The focusModes property is an Array of strings identifying each of the focus modes supported by ...
Mozilla/B2G_OS/API/CameraCapabilities/maxExposureCompensation The maxExposureCompensation property is a number that defines the maximum supported exposure ...
Mozilla/B2G_OS/API/CameraCapabilities/maxFocusAreas The maxFocusAreas property is a number that defines the maximum number of focus areas supported ...
Mozilla/B2G_OS/API/CameraCapabilities/maxMeteringAreas The maxMeteringAreas property is a number that defines the maximum number of metering areas ...
Mozilla/B2G_OS/API/CameraCapabilities/minExposureCompensation The minExposureCompensation property is a number that defines the minimum supported exposure ...
Mozilla/B2G_OS/API/CameraCapabilities/pictureSizes The pictureSizes property is an Array of objects containing the height and width properties ...
Mozilla/B2G_OS/API/CameraCapabilities/previewSizes The previewSizes property is an Array of objects containing the height and width properties ...
Mozilla/B2G_OS/API/CameraCapabilities/recorderProfiles The recorderProfiles property is an object with attributes for each of the supported recorder ...
Mozilla/B2G_OS/API/CameraCapabilities/sceneModes The sceneModes property is an Array identifying each of the scene modes supported by the camera ...
Mozilla/B2G_OS/API/CameraCapabilities/stepExposureCompensation The stepExposureCompensation property is a number that defines the exposure compensation minimum ...
Mozilla/B2G_OS/API/CameraCapabilities/videoSizes The videoSizes property is an Array of objects containing the height and width properties ...
Mozilla/B2G_OS/API/CameraCapabilities/whiteBalanceModes The whiteBalanceModes property is an Array of strings identifiers for each white balance mode ...
Mozilla/B2G_OS/API/CameraCapabilities/zoomRatios The zoomRatios property is an Array of numbers representing all the supported zoom ratios. If ...
Mozilla/B2G_OS/API/CameraControl When you use the CameraManager.getCamera() method to get a reference to a camera, you specify a ...
Mozilla/B2G_OS/API/CameraControl/autoFocus This method attempts to focus the camera. If the camera is able to attempt to focus, a success ...
Mozilla/B2G_OS/API/CameraControl/capabilities The capabilities property return a CameraCapabilities object, which describes the capabilities ...
Mozilla/B2G_OS/API/CameraControl/effect The effect property is a string defining the effect to be used by the camera. When set, its ...
Mozilla/B2G_OS/API/CameraControl/exposureCompensation The exposureCompensation property value is a number used to compensate the camera exposure.
Mozilla/B2G_OS/API/CameraControl/flashMode The flashMode property value is a string that defines how the flash, if any, is to be used. When ...
Mozilla/B2G_OS/API/CameraControl/focalLength The focalLength property value is a read-only property that returns a number that expresses the ...
Mozilla/B2G_OS/API/CameraControl/focusAreas The focusAreas property is an Array of one or more Area objects that define where the camera ...
Mozilla/B2G_OS/API/CameraControl/focusDistanceFar The focusDistanceFar property value is a distance in meters used with ...
Mozilla/B2G_OS/API/CameraControl/focusDistanceNear The focusDistanceNear property value is a distance in meters used with ...
Mozilla/B2G_OS/API/CameraControl/focusDistanceOptimum The focusDistanceOptimum property value is the distance in meters where the subject appears ...
Mozilla/B2G_OS/API/CameraControl/focusMode The focusMode property value is a string that defines which kind of focus mode the camera should ...
Mozilla/B2G_OS/API/CameraControl/getPreviewStream This method is used to configure and access a MediaStream from the camera. The resulting stream ...
Mozilla/B2G_OS/API/CameraControl/getPreviewStreamVideoMode This method is used to configure and access a MediaStream from the camera. You use the resulting ...
Mozilla/B2G_OS/API/CameraControl/meteringAreas The meteringAreas property is an Array of one or more Area objects that define where the camera ...
Mozilla/B2G_OS/API/CameraControl/onClosed The onClosed property is used to set an event handler that will track when a new CameraControl ...
Mozilla/B2G_OS/API/CameraControl/onRecorderStateChange The onRecorderStateChange property is used to set an event handler to listen to the recorder ...
Mozilla/B2G_OS/API/CameraControl/onShutter The onShutter property is used to set an event handler for the camera's "shutter" event, to ...
Mozilla/B2G_OS/API/CameraControl/pauseRecording The pauseRecording() method of the CameraControl interface is used to pause the recording of a ...
Mozilla/B2G_OS/API/CameraControl/release Releases the camera so that other applications can use it. You should call this whenever the ...
Mozilla/B2G_OS/API/CameraControl/resumePreview This method is used to resume the preview stream.
Mozilla/B2G_OS/API/CameraControl/resumeRecording The resumeRecording() method of the CameraControl interface is used to resume the recording of a ...
Mozilla/B2G_OS/API/CameraControl/sceneMode The sceneMode property value is a string that defines the quality of exposure to use while ...
Mozilla/B2G_OS/API/CameraControl/setConfiguration This method is used to set the camera configuration independently of the ...
Mozilla/B2G_OS/API/CameraControl/setExposureCompensation This method is used to change the exposure compensation value.
Mozilla/B2G_OS/API/CameraControl/startRecording This method is used to start recording a video file on the device; the video is stored as a 3gp ...
Mozilla/B2G_OS/API/CameraControl/stopRecording Stops recording video on the device; you should call this at some point after calling ...
Mozilla/B2G_OS/API/CameraControl/takePicture Captures a still image from the camera and passes it as a Blob to a success callback handler, ...
Mozilla/B2G_OS/API/CameraControl/whiteBalanceMode The whiteBalanceMode property value is a string that defines the white balance mode to use. When ...
Mozilla/B2G_OS/API/CameraControl/zoom The zoom property value is a number that defines the zoom factor that is to be used when taking ...
Mozilla/B2G_OS/API/CameraManager The CameraManager interface provides access to any cameras available on the device being used.
Mozilla/B2G_OS/API/CameraManager/getCamera This method is used to access to one of the cameras available on the device based on its ...
Mozilla/B2G_OS/API/CameraManager/getListOfCameras This method is used to get an Array of identifiers of all the cameras available on the device.
Mozilla/B2G_OS/API/Camera_API The Camera API allows applications to manage the camera of the device. It allows them to take ...
Mozilla/B2G_OS/API/Navigator/mozCamera This API has not been implemented as of Firefox OS 2.2. You probably actually want ...
Mozilla/B2G_OS/API/Navigator/mozCameras Returns a CameraManager object you can use to access the cameras available on the user's device.
Mozilla/Firefox_OS_for_TV/UX_overview/Animation A great way to make more life-like animations is to vary the rate at which object moves. ...
Mozilla/Persona/Identity_Provider_Overview A Persona Identity Provider (IdP) is a domain which directly signs and certifies the identities ...
Web/API/CanvasRenderingContext2D To get an object of this interface, call getContext() on a canvas element, supplying "2d" as the ...
Web/API/Canvas_API/A_basic_ray-caster Open in new window
Web/API/Canvas_API/Tutorial This tutorial describes how to use the canvas element to draw 2D graphics, starting with the ...
Web/API/Canvas_API/Tutorial/Advanced_animations We are going to use a ball for our animation studies, so let's first draw that ball onto the ...
Web/API/Canvas_API/Tutorial/Applying_styles_and_colors Up until now we have only seen methods of the drawing context. If we want to apply colors to a ...
Web/API/Canvas_API/Tutorial/Basic_animations Probably the biggest limitation is, that once a shape gets drawn, it stays that way. If we need ...
Web/API/Canvas_API/Tutorial/Basic_usage At first sight a canvas looks like the img element, with the only clear difference being that it ...
Web/API/Canvas_API/Tutorial/Compositing We can not only draw new shapes behind existing shapes but we can also use it to mask off ...
Web/API/Canvas_API/Tutorial/Compositing/Example This sample program demonstrates a number of compositing operations. The output looks like this:
Web/API/Canvas_API/Tutorial/Drawing_shapes Before we can start drawing, we need to talk about the canvas grid or coordinate space. Our HTML ...
Web/API/Canvas_API/Tutorial/Drawing_text The canvas rendering context provides two methods to render text:
Web/API/Canvas_API/Tutorial/Finale There are a variety of demos and further explanations about canvas on these sites:
Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility The content inside the canvas... /canvas tags can be used as a fallback for browsers which don't ...
Web/API/Canvas_API/Tutorial/Optimizing_canvas This article aims to provide suggestions for optimizing your use of the canvas element, to ...
Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas The ImageData object represents the underlying pixel data of an area of a canvas object. It ...
Web/API/Canvas_API/Tutorial/Transformations Before we look at the transformation methods, let's look at two other methods which are ...
Web/API/Canvas_API/Tutorial/Using_images Importing images into a canvas is basically a two step process:
Web/API/Path2D/Path2D The Path2D() constructor returns a newly instantiated Path2D object, optionally with another ...
Web/API/WebGLRenderingContext/createShader The WebGLRenderingContext.createShader() method of the WebGL API creates a WebGLShader that can ...