1 Replies - 544 Views - Last Post: 26 July 2014 - 07:02 PM

#1 Knute1   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 26-July 14

Adjusting graphics

Posted 26 July 2014 - 04:40 PM

Hi, just found this forum and have a question!

I'm not very experienced in web design so this might be the wrong area to ask this but here goes:

So I need to adjust the size of a box behind text and can't figure out how to do it. There's two pages on this site I'm modifying that have this box behind the text and in the html it shows up as this with different values on each page:

<canvas id="siteBg" width="950" height="680"></canvas>

And here's the pics of the boxes:

Posted Image

Posted Image

I changed the value here but it didn't do anything so I'm guessing I have to modify "siteBg" or "canvas" so looked in the CSS and JS files. I found this in style.css:

#siteBg {
    position: absolute;
    top: 85px;
    left: 20px;
    z-index: 2;

and this in main.js:

var stars = {
    time: 6500,
    ctx: document.getElementById('siteBg').getContext('2d'),
    init: function(width, height, c) {

        var x, y, g, w;
        this.clear(width, height);
        for (var i = 0; i < c; i++) {
            x = getRandom(10, width);
            y = getRandom(10, height);
            g = getRandom(0.12, 0.24);
            w = getRandom(5, 9);
            this.draw(this.ctx, x, y, w, 4, g);
    clear: function(w, h) {
        this.ctx.clearRect(0, 0, h, w);
        var o = document.getElementById('siteBg');
        var w = o.width;
        o.width = 1;
        o.width = w;
    draw: function(ctx, x, y, r, p, m) {

        ctx.translate(x, y);
        ctx.moveTo(0, 0 - r);
        for (var i = 0; i < p; i++)
            ctx.rotate(Math.PI / p);
            ctx.lineTo(0, 0 - (r * m));
            ctx.rotate(Math.PI / p);
            ctx.lineTo(0, 0 - r);
        ctx.fillStyle = "#ffffff";
    interval: function(w, h, c) {
        stars.init(w, h, c);
        var starsInterval = setInterval(function() {
            stars.init(w, h, c);
        }, this.time);

Any idea what I might modify to change the size of these boxes? Am I looking in the right general area? Any help would be appreciated, cheers!

Is This A Good Question/Topic? 0
  • +

Replies To: Adjusting graphics

#2 andrewsw   User is offline

  • RequestedRangeNotSatisfiable
  • member icon

Reputation: 6552
  • View blog
  • Posts: 26,563
  • Joined: 12-December 12

Re: Adjusting graphics

Posted 26 July 2014 - 07:02 PM

It is difficult for anyone to help you based on the information you have provided - a link to a live-site would help.

If changing the width and height attributes of that canvas doesn't affect the box you are talking about then I am doubtful that it is the element you need to modify.

You could also change a few values in that stars-code and see if you notice any difference in the page. Explore and experiment.

If you haven't already then you should learn to use your browser's console to inspect the page; there are links to the various consoles in my signature below. Start by right-clicking the box and choosing Inspect Element (in most browsers). It is not just for reading the element though, you can also edit css and step through Javascript, etc..

This post has been edited by andrewsw: 26 July 2014 - 07:04 PM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1