Canvas and Scripting

3 posts in this topic


I am having an issue that I can't seem to be able to figure out. I would really appreciate an extra pair of eyes to validate my work so far.

All this is, so far, is just a bunch of shapes on an HTML page. It is to be a very simple game ( just exploring Javascript through making this ) but right now I am just building the framework/elements.

The script is this 

      body {
        margin: 0px;
        padding: 0px;
      #canvas-container {
   width: 100%;

canvas {
   display: inline;

  <body onload="startUp()">

  <div id="canvas-container">
    <canvas id="game" width="300" height="500"></canvas>
    var canvas = document.getElementById('game');
    var ctx = canvas.getContext('2d');
    var x = canvas.width;
    var y = canvas.height;
    var scoreVal = 0;
    var itemXRand = Math.floor(Math.random() * x) + 1
    function cloud(){
      ctx.moveTo(170, 30);
      ctx.bezierCurveTo(130, 100, 130, 150, 230, 150);
      ctx.bezierCurveTo(250, 180, 320, 180, 340, 150);
      ctx.bezierCurveTo(420, 150, 420, 120, 390, 100);
      ctx.bezierCurveTo(430, 40, 370, 30, 340, 50);
      ctx.bezierCurveTo(320, 5, 250, 20, 250, 50);
      ctx.bezierCurveTo(200, 5, 150, 20, 170, 80);
      ctx.lineWidth = 5;
      ctx.fillStyle = '#8ED6FF';
      ctx.strokeStyle = '#0000ff';

    function workArea(){
      ctx.rect(0, 0, x, y);
      ctx.fillStyle = "#2ab9ff";
      ctx.stroke = 1;

    function topRect(){
      ctx.rect(0, 0, x, 30);
      ctx.fillStyle = "#D3D3D3";
      ctx.stroke = 1;

    function scoreKeep(){   
    ctx.font = "15px Arial";
    ctx.fillStyle = "#000000";
    ctx.fillText("Score "+scoreVal,5, 25);  

    function bttmRect(){
      ctx.rect(0, y-30, x, 30);
      ctx.fillStyle = '#5bc928';
      ctx.stroke = 1;

    function monstRect(){
      ctx.rect(0, y-80, x, 30);
      ctx.fillStyle = 'red';
      ctx.stroke = 1;

    function itemCirc(){
    var centerX = itemXRand
    var radius = 15;
    var positionY = 45;
      ctx.arc(centerX, positionY, radius, 0, 2 * Math.PI, false);
      ctx.fillStyle = randomColor();
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#003300';

    function startUp(){
    function randomColor(){ 


The issue is that cloud() and monstRect() will not show up when the page loads. If I comment out workArea(), topRect(), and bttmRect() in the function "startUp()" then monstRect() and cloud() show up. I've re-read those little snippets of code for those three areas that I comment out and I can't see where I have gone wrong.

Any advice or if you can spot my mistake I would really appreciate it.

Thank you!


Share this post

Link to post
Share on other sites

  1. Bad use of ASI (automatic semi-colon insertion)
  2. Polluting the global scope (use an IIFE or ES2015 module)
  3. I am not really seeing your issue, though I do see errors when I move your code to,js,console,output. Check the console and you will see what I mean.

_AdapterConnections()_AlwaysRun()_AppMon()_AppMonEx()_BinaryBin()_CheckMsgBox()_CmdLineRaw()_ContextMenu()_ConvertLHWebColor()/_ConvertSHWebColor()_DesktopDimensions()_DisplayPassword()_DotNet_Load()/_DotNet_Unload()_Fibonacci()_FileCompare()_FileCompareContents()_FileNameByHandle()_FilePrefix/SRE()_FindInFile()_GetBackgroundColor()/_SetBackgroundColor()_GetConrolID()_GetCtrlClass()_GetDirectoryFormat()_GetDriveMediaType()_GetFilename()/_GetFilenameExt()_GetHardwareID()_GetIP()_GetIP_Country()_GetOSLanguage()_GetSavedSource()_GetStringSize()_GetSystemPaths()_GetURLImage()_GIFImage()_GoogleWeather()_GUICtrlCreateGroup()_GUICtrlListBox_CreateArray()_GUICtrlListView_CreateArray()_GUICtrlListView_SaveCSV()_GUICtrlListView_SaveHTML()_GUICtrlListView_SaveTxt()_GUICtrlListView_SaveXML()_GUICtrlMenu_Recent()_GUICtrlMenu_SetItemImage()_GUICtrlTreeView_CreateArray()_GUIDisable()_GUIImageList_SetIconFromHandle()_GUIRegisterMsg()_GUISetIcon()_Icon_Clear()/_Icon_Set()_IdleTime()_InetGet()_InetGetGUI()_InetGetProgress()_IPDetails()_IsFileOlder()_IsGUID()_IsHex()_IsPalindrome()_IsRegKey()_IsStringRegExp()_IsSystemDrive()_IsUPX()_IsValidType()_IsWebColor()_Language()_Log()_MicrosoftInternetConnectivity()_MSDNDataType()_PathFull/GetRelative/Split()_PathSplitEx()_PrintFromArray()_ProgressSetMarquee()_ReDim()_RockPaperScissors()/_RockPaperScissorsLizardSpock()_ScrollingCredits_SelfDelete()_SelfRename()_SelfUpdate()_SendTo()_ShellAll()_ShellFile()_ShellFolder()_SingletonHWID()_SingletonPID()_Startup()_StringCompact()_StringIsValid()_StringRegExpMetaCharacters()_StringReplaceWholeWord()_StringStripChars()_Temperature()_TrialPeriod()_UKToUSDate()/_USToUKDate()_WinAPI_Create_CTL_CODE()_WinAPI_CreateGUID()_WMIDateStringToDate()/_DateToWMIDateString()Au3 script parsingAutoIt SearchAutoIt3 PortableAutoIt3WrapperToPragmaAutoItWinGetTitle()/AutoItWinSetTitle()CodingDirToHTML5FileInstallrFileReadLastChars()GeoIP databaseGUI - Only Close ButtonGUI ExamplesGUICtrlDeleteImage()GUICtrlGetBkColor()GUICtrlGetStyle()GUIEventsGUIGetBkColor()Int_Parse() & Int_TryParse()IsISBN()LockFile()Mapping CtrlIDsOOP in AutoItParseHeadersToSciTE()PasswordValidPasteBinPosts Per DayPreExpandProtect GlobalsQueue()Resource UpdateResourcesExSciTE JumpSettings INISHELLHOOKShunting-YardSignature CreatorStack()Stopwatch()StringAddLF()/StringStripLF()StringEOLToCRLF()VSCROLLWM_COPYDATAMore Examples...

Updated: 04/09/2015

Share this post

Link to post
Share on other sites


Your reply is amazingly helpful and friendly.

I actually ended up scrapping the entire thing and went to work in Python for fun :)

I will review my old ( this one ) code and apply the information you provided.

Thank you for your time and assistance!


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Patryk
      By Patryk
      Dear Colleagues,
      I have no idea how to refer to style.display in my loop. There is a button like: 
      <input name="ctl00$bodyPlaceholder$btnFecharProcessamento" class="button" id="bodyPlaceholder_btnFecharProcessamento" style="display: none;" onclick="FecharJanelaProcessamento();return false;" type="submit" value="Fechar"> I want it to be clicked as soon as button's style change from style="display: none;" to  style= ="display: inline-block;" 
      This is what I got, but it's not working...
      Func GetButtons() $oButtons = _IEGetObjByName($oForm,"ctl00$bodyPlaceholder$btnFecharProcessamento",-1) $i = 0 While $i <> 1 For $oBtn In $oButtons If _IEFormElementGetValue($oBtn) = "Fechar" And $ = "display: inline-block;" Then $i = 1 _IEAction($oBtn, "focus") _IEAction($oBtn, "click") ExitLoop EndIf Next WEnd EndFunc  
      I will really appreciate if you could help me with these loop!
    • Omnitica
      By Omnitica
      I'm new to the forums! Couldn't find any threads covering this issue. Sorry if I'm wrong.

      I'm having problems changing the text/value of a input box. The particular box doesn't have a name or id, just: class="jq_hotkeys_enabled form-control".
      This class appears multiple times throughout the source, so I don't think It's right to reference that object. 
      See image 1.
      However, I've managed to find a object with the name "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper" which contains the value of the input box, and the id for the person in the dropdown/combobox left of it. (with "dummy-1" selected).
      See image 2.
      As you can see the value is 3982,4545     ( name , time )
      But when I try to change the value of it by doing:
      #include <IE.au3> Local $oIE = _IEAttach(WinGetHandle("[CLASS:IEFrame]"),"embedded") Local $oForm = _IEFormGetObjByName($oIE, "aspnetForm") Local $oInput = _IEFormElementGetObjByName($oForm, "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper") _IEFormElementSetValue($oInput, "3982,1337") The box doesn't get its new value. I  can see in the source that it's changed though.
      See image 3.
      However, if I do: 
      #include <IE.au3> Local $oIE = _IEAttach(WinGetHandle("[CLASS:IEFrame]"),"embedded") Local $oForm = _IEFormGetObjByName($oIE, "aspnetForm") Local $oInput = _IEFormElementGetObjByName($oForm, "ctl00$content$ctrl$ucServiceTime$rpServicetimes$ctl00$edtHiddenResourceHelper") _IEFormElementSetValue($oInput, "3982,1337") $oIE.document.parentwindow.execScript("theForm.submit()") ; But it needs to reload the page The box gets its new value after the page reloads by the theForm.submit() function. 
      This is a bit unfortunate as I want the changes to happen instantly like when I type in the box with the keyboard... or select in the combobox.
      Maybe someone knows how I can do this? Looking forward to an answer! 
      Thanks in advance.
      Note: Unfortunately I can't provide with the real URL as it is constricted to employees in the company I work for, but let me know If I should provide anything else.

    • milos83
      By milos83
      How can I check if element is focused in Firefox using FF.au3 UDF?
      This is my try:
      I have prepared a function that checks if the object is focused:
      _FFCmd('FFau3.isfocused=function isfocused(a){try{return (a === document.activeElement)}catch(e){return}}') $oElm = _FFXPath("//*[@id='someId']") ConsoleWrite(_FFIsFocused($oElm)) Func _FFIsFocused($sElement = "") Local $isFoc = _FFCmd("FFau3.isfocused(" & $sElement & ")") Return $isFoc EndFunc ;==>_FFIsFocused Now, the javascript part is tested and it does return successfully.
      After a lot of try/fails I inserted an alert box in order to display the object being compared.
      Here is what I got
      The focused object is: [object XULElement]
      The object that I send for comparing is [object HTMLInputElement]
      Why is that?
    • Chimp
      By Chimp
      Hi all.
      I'm playing a bit with the ScriptControl object using as base this example by @genius257.
      here is a very simple try, ... but it fails. what I'm doing wrong?
      Local $oSC = ObjCreate("ScriptControl") $oSC.Language = "JScript" $oSC.ExecuteStatement('alert("I am a javascript alert box!");') MsgBox(0,'AutoIt','Pause') Thanks
    • steveeye
      By steveeye
      Hi, what else can we add in <table> besides <tr> & <td> to make it more interative to the users?