Member Avatar for sentongogray

greetings to all members!

  • 5 Contributors
  • 4 Replies
  • 124 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by hericles

Dani AI

Generated

The original question is a bit open-ended about what you mean by "create the graphics" — placing image files on a page, drawing shapes inside the browser, or building interactive/animated graphics. raised that same canvas vs image distinction, noted that JavaScript enables drawing/animation, and showed the basic HTML image markup. Below are practical choices and concise guidance to pick the right approach.

Static photos and complex scenes — use raster files (JPEG/PNG) or modern compressed formats (WebP/AVIF) and serve responsive sizes so mobile devices download smaller images. Vector art for logos/icons — use SVG: it scales cleanly, can be styled/animated with CSS/JS, and is often smaller for UI assets (SVG basics). Programmatic drawing and games — use Canvas or WebGL when you need per-pixel control or high-frame-rate animation (Canvas API). Simple UI shapes and decorations — often achievable with plain CSS (gradients, border-radius, transforms) and avoid extra image files.

A simple workflow: design vectors in a tool (Figma/Inkscape), export appropriate formats, optimize raster output with a tool like Squoosh (https://squoosh.app/), and optimize SVGs (SVGO) before publishing. If editing in Notepad, save files with an .html extension and keep image files in a predictable relative folder. If an image doesn’t show, check the browser DevTools network tab for 404s, verify filename case (servers can be case-sensitive), and confirm SVGs are served with the correct MIME type. For responsive delivery, look into srcset/picture patterns (Responsive images).

Example of an inline SVG (useful for icons/inline illustrations):

<svg width="120" height="120" xmlns="http://www.w3.org/2000/svg">
  <rect width="120" height="120" fill="#f0f0f0"/>
  <circle cx="60" cy="60" r="40" fill="#2b8be0"/>
</svg>

Choose raster for photos, SVG for UI/graphics, Canvas/WebGL for interactive or high-performance drawing.

Recommended Answers

All 4 Replies

Member Avatar for poojavb

U r not clear enough.....Please mention in detail....

Member Avatar for M.Budhaprasad

Yes.its possible,using javascript it can possible ,am designed lot of web pages using java script in html

Member Avatar for dany12

Do you mean to apear on canvas or to useimg src tag from html and put a photo or a graphic on the page?

Member Avatar for hericles

The HTML code for placing an image on the page is
<img src="location_of_image/image_name.jpg" alt="alternate text" />

I would suggest getting used to the W3Cschools website if you are very new to HTML/CSS. It is a great learning tool

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.