HTML Canvas and SVG

HTML Canvas:

8. Drawing Images:

   • Images can be drawn onto the canvas using the drawImage() method, which allows you to specify an image object, coordinates, and dimensions.
   • 
     
   • var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, canvas.width, canvas.height); }; img.src = 'image.jpg';
   
   

9. Clipping and Masking:

   • Canvas supports clipping and masking techniques to selectively display parts of the drawing or apply effects.
   • 
     
   • ctx.save(); // Save the current state ctx.beginPath(); ctx.arc(100, 100, 50, 0, Math.PI * 2); ctx.clip(); // Clip to the circle // Draw something inside the clipped area ctx.restore(); // Restore the saved state
   
   

10. Compositing and Blending:

    • Canvas provides compositing operations (globalCompositeOperation) and blending modes (globalAlpha) to control how shapes and colors interact.
    • 
      
    • ctx.globalCompositeOperation = 'destination-over'; // Set compositing mode ctx.globalAlpha = 0.5; // Set transparency
    
    

11. Pixel Manipulation:

    • The canvas pixel buffer can be directly accessed for pixel-level manipulation, enabling effects like image filters, color adjustments, and pixelation.
    • 
      
    • var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; // Manipulate pixel data (RGBA values) ctx.putImageData(imageData, 0, 0); // Put modified pixel data back onto the canvas
    
    

SVG (Scalable Vector Graphics):

8. Gradients and Patterns:

   • SVG supports linear and radial gradients (<linearGradient>, <radialGradient>) for creating smooth color transitions.
   • 
     
   • <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient>
   
   
   • Patterns can be defined and applied to shapes using <pattern> elements.

9. Filters:

   • SVG filters allow for applying various graphical effects such as blur, drop shadow, brightness adjustment, etc., to SVG elements.
   • 
     
   • <filter id="blur"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" /> </filter> <circle cx="100" cy="100" r="50" fill="red" filter="url(#blur)" />
   
   

10. Text Paths:

    • Text can be aligned along a path using the <textPath> element, allowing for curved or custom-shaped text.
    • 
      
    • <path id="curve" d="M10 80 Q 52.5 10, 95 80 T 180 80" /> <text> <textPath xlink:href="#curve">Curved Text</textPath> </text>
    
    

11. Clipping and Masking:

    • SVG supports clipping and masking similar to HTML Canvas, allowing you to define shapes or paths to hide or reveal parts of an SVG graphic.
    • 
      

12. Integration with CSS and JavaScript:

    • SVG elements can be styled using CSS for visual effects and animations.
    • JavaScript can be used to dynamically manipulate SVG elements, respond to user interactions, and create interactive visualizations.
    • 
      

13. Accessibility (A11y) Features:

    • SVG elements can include ARIA attributes and labels for improved accessibility, ensuring that SVG graphics are usable by people with disabilities.
    • 
      

14. Responsive Design:

    • SVG graphics scale seamlessly to different sizes and resolutions, making them ideal for responsive web design.

Understanding these additional features of HTML Canvas and SVG will broaden your capabilities in creating complex and interactive graphics for web applications.