We Keep Coding

How can I do a generated image on a website?

I'm trying to figure out how to make a website image, just some little blob of color without actually creating an image and putting an image tag and all of that. Is it possible?
Would I be drawing it with CSS, Javascript, or HTML5? If drawing it on the fly with something like Javascript, is that something that is a good idea? drawing over and over?
Not sure where to start looking? Thanks for any help.
Here is an example of an image I'd like to make: https://dl2.pushbulletusercontent.com/0P1OxQU6AoPT5LnWG3jROJgEmdWoPKUw/image.png

SVG is a good choice. It allows you to use a document structure, much like that of HTML, for vector graphics. The <rect> element makes a rectangle. For more complex shapes like your example, check out paths. More info here: Rounded corner only on one side of svg <rect>
Vector graphics are easy to generate and manipulate programatically. They can also be sized and scaled without pixelation.
If you need complex filtering or want raster graphics instead, a Canvas element and its 2D drawing context are a good choice.

Is there a way to make a circular image in HTML using Canvas or other Method?

I know that the canvas element can look like a circle using the CSS border-radius property. However, if you draw something using the canvas API, and then right-click to "Save as Image", when saved, the image is still a rectangle (as if the border-radius was not applied). Is there a way to actually save the correct image?

All image formats that I know of yield rectangles.
You could draw a circle on a canvas with the outside of the circle being transparent. That would visually look like a circle rather than a rectangle.

When css applies, it does not really transform the image except visually. So, you would need a bit more than simple css. The issue is discussed here where what you want is achieved using javascript:
Save canvas image after css applied
Capture and save an image with css effects applied
Hope this helps.

SVG On Canvas Black Lines Look Grey?

I have created a grid with just basic lines in illustrator and saved as SVG. I then am loading that svg into a html canvas of exactly the same size as the svg.
However no matter what i do the black lines on the canvas svg look grey, in fact the odd one or two is black, but the others look like they are being anti aliased.
I don't want the canvas to do that, i need the lines sharp and black, not grey! They look fine in illustrator, after i turned off anti-alias.
Does anyone know how to prevent the canvas doing that? I am using fabric js

You can turn off anti-aliasing by using the following property:
shape-rendering="crispEdges"
It can be a style attribute, or you can specify it in CSS. You will need to edit the svg, or your CSS. You can't set this in Illustrator.
This will work fine for rectangular grids, but curved or angular lines will look worse. of course.
You can also avoid anti-aliasing by being careful where you place your lines. See the following answer for more info on that.
https://stackoverflow.com/a/23376793/1292848

Raphael repeat background pattern

I would like to have a repeated pattern of squares (a little like a blueprint) as a background to the entire SVG element. I am using Raphael. How can I accomplish this?
I want to do this with SVG rather than images as I pan / zoom the SVG using SetViewBox and I would like the background to scale appropriately too.

One option is to render those squares the usual way, via paper.rect(). Might be expensive, though, and would take some maintenance if the canvas can grow in size.
The other option is to do a patterned fill, paper.rect(0,0,100,100).attr({fill: "url(images/pattern.png)"}); (see this tutorial), which should automatically repeat the image it is given. I haven't done that myself, though, so I'm not really sure how the pattern is scaled when you do SetViewBox().

Can't scale multiple paths in Raphael?

I've tried using the current top Question on SO : Scaling multiple paths with raphael
...without much luck. I'm building a map of the USA through Raphael and while the map is very nice, I need it to be probably 30% the size it is currently.
I was able to change the attr on the initial Raphael canvas to ".5" but that only sized each individual path instead of the whole canvas. I have also tried using javascript to scale the div containing the canvas to no avail.
Paths: Actual Page:
http://praxxgray.com/am/rafe2/mapTest.html
javascript:
http://praxxgray.com/am/rafe2/js/initMap.js
I'm new to Raphael, but I have bosses breathing down my neck to get it working. The image beneath the Raphael map shows the size that I'm aiming for. I feel like I am close, perhaps I am calling the wrong object to be resized?
Help me Obi Wan!
Thanks!

Don't know if this'll help, and it's a bit off the cuff, but have you tried sticking your map in it's own raphael instance and then using Paper.setViewBox(...) to resize it?
var map = Raphael(100,100,800,500);
//
// draw my very big map, bigger than 800x500
//
map.setViewBox(100,100,800,500,true);
// doesn't change the size of the raphael instance, but will force the graphics to fit
// inside it.
setViewBox lets you alter the viewport. From the link - "Sets the view box of the paper. Practically it gives you ability to zoom and pan whole paper surface by specifying new boundaries".
It might be a quick way to get what you want. It Raphael 2 only though :(
(This should work, but I haven't actually tested it. As I said, it's a bit off the cuff...)

Add the parameter viewBox and preserveAspectRatio to the SVG element. I tried adding these parameters, just to see if I managed to change the size, and I did.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
viewBox="0 0 2500 3100" preserveAspectRatio="none">
More about the viewBox attribute here.

I came up with this jsfiddle. I'm using this in my own map with multiple regions. Works on IE6,8 & 9
http://jsfiddle.net/chrisloughnane/EUwRq/